Template DIVS

Box Model

Um formato comum encontrado nesse tipo de layout é o exibido na imagem a seguir.

Para isso são utilizadas cinco DIVS, cada uma com um identificador.

Cada nome encontrado dentro de uma caixa é um novo identificador do CSS.

Geralmente esses identificadores são escritos dessa maneira, sem os acentos.

A ordem de criação desses identificadores também é importante: Geral, Topo, Lado, Conteudo

e Rodape.

Para criar a primeira DIV e o seu identificador

 insira uma DIV num novo documento com o Insert em At inserction point e

ID com o nome de Geral;

 clique também em New CSS Style e configure a tela de criação do novo estilo

CSS.

 escolha o Selector Type Advanced, o Selector com o nome de #Geral e Define

in (New Style Sheet File)

 será exibida uma tela para salvar a folha de estilos. Utilize o nome tableless.css

e clique em Save;

Modifique as propriedades:

o Box/Width - 760 pixels;

o Box/Margins - Top 0 pixels, Right Auto, Bottom 0 pixels e Left Auto

(dessa maneira o layout será centralizado);

 clique em OK, OK novamente e veja o resultado.

A DIV criada é exibida dessa maneira

A DIV Geral é quem delimita o conteúdo das demais DIVS.

Nessa diagramação, as outras DIVS são inseridas dentro da Geral.

 apague o texto Content for id "Geral" Goes Here;

 insira uma DIV num novo documento com o Insert em After start od tag <div

id="Geral"> e ID com o nome de Topo;

 clique também em New CSS Style e configure a tela de criação do novo estilo

CSS;

 escolha o Selector Type Advanced, o Selector com o nome de #Topo e Define

in tableless.css

 modifique as propriedades:

 Background/Background color - #CC9999

 Box/Height - 120 pixels

 clique em OK, OK novamente e veja o resultado.

Construindo as demais divs

1. Abra a estrutura de site local Dreamweaver CS3. Salve o arquivo com a DIV

Geral e Topo com o nome de tableless.html na pasta raiz.

2. Insira uma nova DIV, com o nome de Lado e Insert After tag - <div id="Topo">

3. Configure um novo estilo CSS para essa DIV com as características:

 Box/Width - 160 pixels

 Box/Float - Right

4. Insira uma nova DIV, com o nome de Conteudo e Insert After tag - <div

id="Lado">

5. Configure um novo estilo CSS para essa DIV com as características:

 Box/Margin - Right - 170 pixels

6. Insira uma nova DIV, com o nome de Rodape e Insert After tag - <div

id="Conteudo">

7. Configure um novo estilo CSS para essa DIV com as características:

 Background/Background color - #663333

 Box/Height - 40 pixels

 Box/Clear - Both

8. Salve o arquivo tableless.html e o arquivo tableless.css.

Modificando as divs

1. Abra a estrutura de site local Dreamweaver CS3 e também o arquivo

tableless.html, encontrado na pasta raiz.

2. Altere o título do documento para "Box Model - Tableless/CSS".

3. Apague os textos "Content for id "Nome" Goes Here" incluídos em todas as

DIVS.

4. Configure um novo estilo CSS redefinindo a tag BODY com os parâmetros:

Type/Font - Verdana, Arial, Helvetica, sans-serif

 Type/Size - 10 points

 Background/Background color - #113217

 Background/Background