helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Explicamos a criação da página, que se simplificará ao máximo para tornar o exercício mais fácil.
Por Miguel Angel Alvarez - Tradução de JML
Continuamos o exercício prático para realizar a construção de uma página passo a passo com camadas e folhas de estilo em cascata. Pode-se ver o artigo anterior desta série em Montar uma página com CSS.
O cabeçalho da página
Vamos colocar a imagem da parte de cima da página em um único arquivo gráfico. É o mais cômodo para este desenho, pois o cabeçalho não tem outro motivo a não ser decoração.
<div id="cabecera"><img src="images/cabeçalho.jpg" width="700" height="106" alt="A Web do Inverno" border="0"></div>
Vemos que é uma simples imagem, mas atenção que temos que colocar o </div> em seguida de <img> sem nenhum espaço ou salto de linha, porque senão, Internet Explorer, nos introduzirá uma pequena margem debaixo da imagem, que queremos evitar.
Os atributos de estilo definidos para o cabeçalho são as dimensões da camada, que queremos que sejam as mesmas que as da imagem. Embora neste caso, poderíamos ter poupado definir estes valores porque são os que se tomaria por padrão.
#cabecalho{
height : 106px;
width: 700px;
}
Por Miguel Angel Alvarez - Tradução de JML
Continuamos o exercício prático para realizar a construção de uma página passo a passo com camadas e folhas de estilo em cascata. Pode-se ver o artigo anterior desta série em Montar uma página com CSS.
O cabeçalho da página
Vamos colocar a imagem da parte de cima da página em um único arquivo gráfico. É o mais cômodo para este desenho, pois o cabeçalho não tem outro motivo a não ser decoração.
<div id="cabecera"><img src="images/cabeçalho.jpg" width="700" height="106" alt="A Web do Inverno" border="0"></div>
Vemos que é uma simples imagem, mas atenção que temos que colocar o </div> em seguida de <img> sem nenhum espaço ou salto de linha, porque senão, Internet Explorer, nos introduzirá uma pequena margem debaixo da imagem, que queremos evitar.
Os atributos de estilo definidos para o cabeçalho são as dimensões da camada, que queremos que sejam as mesmas que as da imagem. Embora neste caso, poderíamos ter poupado definir estes valores porque são os que se tomaria por padrão.
#cabecalho{
height : 106px;
width: 700px;
}