Blog do web designer Paulo Victor
mar/2010
1
Bom, neste tutorial vou explicar como se cria uma página básica em Tableless (HTML + CSS).
Primeiramente, é necessário que você baixe os arquivos necessários para seguir este tutorial, clicando aqui.
Obs.: Neste download virá um arquivo .zip com duas pastas, uma hamada “imagens”, que contém todas imagens necessárias para a criação do layout que foi utilizado neste tutorial. A outra pasta se chama “modelo-tableless-final” que trás um exemplo já pronto, feito a partir deste tutorial.
Sempre antes do começo do desenvolvimento de qualquer site é preciso ter um planejamento, mesmo que seja algo básico, como você imaginar um layout e rabiscá-lo no papel, por exemplo. Um bom planejamento evita transtornos durante o desenvolvimento, diminuindo assim o tempo de execução do projeto.
Bom, mas agora não estamos interessados muito no planejamento, vamos partir direto para o planejamento, tendo em mãos um simples wireframe.
A única diferença do wireframe acima para o que foi utilizado neste exemplo é a altura das divs centrais, que é de 400px e não de 550px.
Acima podemos ver o esqueleto do nosso site, nele temos a estrutura que será usada em nossa página. Nela já coloquei o nome de cada elemento, a largura (Width), a altura (Height), a distância para o topo da página (Top) e a distância para a borda-esquerda da página (Left).
Para começar, vamos criar um arquivo CSS, que usaremos para declarar os atributos dos elementos usados em nossa página HTML.
Se você nunca mexeu com CSS, leia a próxima parte do artigo, mas se você já conhece o básico de CSS, clique aqui e vá direto para a parte 3.
- Construindo uma página (site) usando Tableless
Ir para:
- Parte 1 | Parte 2 | Parte 3 | Parte 4 | Parte 5
Postado por Paulinho
Pesquisa
Acompanhe-me
Newsletter
Categorias
Assuntos frequentes
alinhamento
aprender
asp
caracteres
centralizar site
conhecimento
cores
CSS
Descontração
design
designer
design gráfico
dica
galeria
HTML
ie6
indicação
inspiração
Internet Explorer
layout
navegador
navegação
salário
site
sub-menu
tutorial
usabilidade
utf-8
webdesign
web design
Links
Blogroll
Enquete
Comentário inserido em março 7, 2010
[...] que ainda não é um site belo visualmente, mas na próxima parte começaremos a ver uma forma simples de deixar a página mais apresentável. – Construindo uma [...]
Comentário inserido em março 27, 2010
Opá eai Paulo =D
Cara não estou conseguindo baixar os seus arquivos.
Ate o Chat…
Comentário inserido em abril 5, 2010
Opa Henrik, blz?
Então cara, o link estava errado, mas já concertei, obrigado pelo aviso.