Blog do web designer Paulo Victor

Nos próximos passos, vamos por algum tipo de conteúdo para cada div. Começando claro pela div topo. Onde vamos colocar o título do nosso site, portanto precisaremos escrevê-lo dentro da tag h1. Veja como ficará a div #topo em nosso documento HTML:

<div id="topo">
 
<h1>Minha primeira página em tablelles</h1>
 
</div>

Agora vamos partir para o menu.

A forma correta de se criar um menu, seguindo os padrões ditados pela w3c é com o uso de listas não ordenadas, ou seja, utilizando as tags <ul> e <li>. A tag <ul> indica que, entre ela e a tag </ul> tem uma série de itens q devem ser ordenados em forma de lista, estes itens são indicados entre as tags <li> e </li>. Veja a seguir como ficará o código da div #menu da nossa página.

<div>
 
<ul>
 
<li><a href="#">HOME</a></li>
 
<li><a href="#">LINK 1</a></li>
 
<li><a href="#">LINK 2</a></li>
 
<li><a href="#">CONTATO</a></li>
 
</ul>
 
</div>

Ainda não teremos o menu desejado, pois ainda não definimos como será o estilo do nosso menu no CSS.

Seguindo a hierarquia do nosso código HTML, a primeira coisa que vamos estilizar é a declaração da lista, ou seja a tag <ul>, nela a única coisa que declararemos, é a retirada de qualquer margem que possa existir.

Após isso vamos definir que todos os itens da lista estarão na mesma linha, e que não haverá nenhum marcador na lista.

#menu ul {
 
margin:0px;
 
}
 
#menu li {
 
display:inline;
 
list-style:none;
 
margin-right:20px;
 
}

Feito isso, é hora de estilizar o link, nesse exemplo mexi no atributo “font-weight”, que define se a fonte será normal ou estará em negrito (bold). Vamos também mudar a cor do link através do atributo “color”, tirar aquele sublinhado que há embaixo de links normais através do atributo text-decoration e por último definir o tamanho da fonte (“font-size”). Veja:

 
#menu li a {
 
font-weight:bold;
 
color:#E0DFF7;
 
text-decoration:none;
 
font-size:12px;
 
}

Atualiza sua página, e note que os links estão lá, mas quando você passa o mouse sobre eles, nada acontece, então para ajudar seu usuário a perceber que aquela palavra é um link, vamos estilizar o estado “over” do link, que é o estado em que um elemento fica quando o ponteiro do mouse está posicionado sobre ele.

#menu li a:hover {
 
color:#BBD8E1;
 
text-decoration:underline;
 
}

Atualize novamente a página e verá que agora, quando passa o mouse por cima do link, ele muda levemente a cor do link e aparece um sublinhado no link.

Agora vamos colocar um conteúdo de teste nas demais, sem grandes mistérios:

- Na div #cntdPrincipal, vamos colocar um pedaço de Lorem ipsum (texto padrão  para testes em espaços em brancos em qualquer tipo de publicação, seja online ou impressa).

- Na div #cntdLateral, vamos simplesmente colocar uma imagem.

- Na div #rodape, vamos colocar uma ultima informação, sobre quem criou a página por exemplo.

Antes de mostrar como vai ficar o código HTML destas três divs, vamos à um último detalhe de nosso CSS, que utilizaremos no nosso rodapé.

Através do atributo text-align, vamos centralizar o conteúdo da div #rodape. Ficando assim o código CSS final da div:

#rodape {
 
position:absolute;
 
width:940px;
 
height:40px;
 
top: 610px;
 
left: 5px;
 
background-image:url(rodape.jpg);
 
padding:5px;
 
text-align:center
 
}

Agora, finalmente vamos ao código HTML das últimas três divs a serem estilizadas.

<div id="cntdPrincipal">
 
<h2>Lorem ipsum</h2>
 
<p> <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
 
</div>
 
<div>
 
<h3>Div Lateral</h3>
 
<p align="center"><img src="psgm.jpg" width="200" height="300" alt="Paisagem" /></p>
 
</div>
 
<div id="rodape">
 
Exemplo de página em Tableless criado pelo <a href="http://www.paulowd.com.br/blog" target="_blank">webDesigner Paulo Victor</a>
 
</div>

E após todo esse trabalho, chegamos finalmente a um resultado semelhante ao da imagem abaixo.

Caso queira ver os arquivos utilizados na elaboração desse artigo, clique aqui, e baixe-os.

- Construindo uma página (site) usando Tableless
Ir para:
- Parte 1 | Parte 2 | Parte 3 | Parte 4 | Parte 5