helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Tutorial para montar uma página web utilizando CSS ao invés de tabelas.
Por Miguel Angel Alvarez - Tradução de JML
Vamos realizar um exercício de projeção de uma página web utilizando unicamente folhas de estilo em cascata (CSS), separando completamente o conteúdo do arquivo HTML das definições do aspecto, que serão salvadas em um arquivo .css. Realizaremos o exercício passo a passo, partindo de uma imagem desenhada previamente com um programa de edição gráfica como Photoshop.
Imagens de partida
Podemos ver a imagem que criamos e que vamos tentar construir o mais parecido possível. Não é o objetivo deste manual oferecer as técnicas para realizar esta imagem, embora em outros manuais de CriarWeb.com podemos ver tutoriais para aprender alguns dos truques de desenho utilizados.
Trata-se de um desenho simples, porém, onde se encontram elementos distintos e variados com os quais trabalhar.
Desta imagem extraíamos alguns gráficos, que utilizaremos na hora de construir o desenho. Seria interessante baixa-lo para poder realizar o exercício por sua conta.
Para os impacientes, temos um link à página do resultado que vamos conseguir realizar no final do artigo. Pode ser bom vê-la para ter uma idéia da onde queremos chegar.
Desenvolvimento da página e a folha de estilos
Vamos gerar os arquivos HTML e CSS de uma vez, mas passo a passo, de forma que possamos explicar as etiquetas e estilos que utilizamos para cada parte da página.
Como primeiro passo, no cabeçalho <head> do documento HTML, linkaremos com uma folha de estilos externa.
<head>
<title>A web do inverno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>
Por Miguel Angel Alvarez - Tradução de JML
Vamos realizar um exercício de projeção de uma página web utilizando unicamente folhas de estilo em cascata (CSS), separando completamente o conteúdo do arquivo HTML das definições do aspecto, que serão salvadas em um arquivo .css. Realizaremos o exercício passo a passo, partindo de uma imagem desenhada previamente com um programa de edição gráfica como Photoshop.
Imagens de partida
Podemos ver a imagem que criamos e que vamos tentar construir o mais parecido possível. Não é o objetivo deste manual oferecer as técnicas para realizar esta imagem, embora em outros manuais de CriarWeb.com podemos ver tutoriais para aprender alguns dos truques de desenho utilizados.
Trata-se de um desenho simples, porém, onde se encontram elementos distintos e variados com os quais trabalhar.
Desta imagem extraíamos alguns gráficos, que utilizaremos na hora de construir o desenho. Seria interessante baixa-lo para poder realizar o exercício por sua conta.
Para os impacientes, temos um link à página do resultado que vamos conseguir realizar no final do artigo. Pode ser bom vê-la para ter uma idéia da onde queremos chegar.
Desenvolvimento da página e a folha de estilos
Vamos gerar os arquivos HTML e CSS de uma vez, mas passo a passo, de forma que possamos explicar as etiquetas e estilos que utilizamos para cada parte da página.
Como primeiro passo, no cabeçalho <head> do documento HTML, linkaremos com uma folha de estilos externa.
<head>
<title>A web do inverno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>