(...)
Neste tutorial, veremos como criar o layout de um site sem usar tabelas; em lugar delas, usaremos camadas, posicionando-as com CSS-P, ou seja, posicionamento por estilos. Nossa página terá três áreas principais: um menu horizontal, outro menu lateral e uma área central. O tutorial foi feito no Dreamweaver 8.
1. A primeira camada será a do menu horizontal. Abra uma pagina no Dreamweaver e, no modo “Design”, clique em Insert – Layout objetcs – Layer. Surge uma camada no arquivo (parece uma moldura, mas não confundir com frames). Clique na borda para selecioná-la. Vamos agora definir sua posição.
2. No painel de propriedades (“Properties”, aquele inferior), observe as caixas L e T. Elas determinam a distância em pixels da camada até a margem esquerda (L) e até o alto (T) da página. As caixas W e H definem a largura (W) e altura (H) da camada. Insira os valores 30px, 10 px, 700px e 75px para cada uma respectivamente, nas caixas L, T, W e H. Não esqueça de inserir a unidade de medida (px) ao lado dos números.
3. Agora vamos ajustar as propriedades da camada. Selecione-a e, no painel de propriedades, clique em BG Color para escolher uma cor de fundo. Neste tuto, vamos usar um tom de azul.
4. A inserção de objetos segue o padrão do Dreamweaver. Para inserir um logotipo, por exemplo, clique dentro da camada e acione Insert – Image e navegue até a imagem desejada. Neste tuto, usamos uma figura de 70 pixels de altura, que cabe sem problemas nos 75 pixels de altura da camada, que definimos no passo 2.
5. Agora vamos inserir quatro itens ainda nesse menu: Cadastro, Suporte, Contato e Sobre nós, separados pelo comando Ctrl+Shift+barra de espaço. Digite os itens, que como vc já pode notar, levarão a outras págs. do site.
6. Passemos a outra área da página, onde ficará o menu lateral. Repita o passo 1 para criar outra camada, mas, antes de acionar o menu Insert, certifique-se de que o cursor está fora da primeira camada. Criada a segunda camada, selecione-a e defina os valores 30px, 85px, 150px e 300 px nas caixas L, T, W e H, respectivamente. Com isso, teremos uma caixa de orientação vertical, posicionada no canto esquerdo da página, com a borda superior colada na parte inferior do menu horizontal. Se preferir, altere a cor de fundo dessa 2ª camada.
7. Nesta 2ª camada, vamos inserir os itens do menu lateral, de forma parecida com o passo 5, digite as palavras ou insira botões separados por Enters.
8. Vamos passar agora à última camada, que será o miolo da página. Crie uma nova camada, tomando o cuidado para que ela seja montada fora das anteriores, e a posicione com as coordenadas 180px, 85px, 550px e 500px, na mesma ordem já utilizada antes. Teremos uma área branca no miolo.
9. Vc pode preencher agora esse miolo da forma que preferir. Verifique essa 1ª pg num navegador web; o Dreamweaver deverá ter salvo os posicionamentos automaticamente. Se tudo estiver ok, salve essa página com outros nomes p/ gerar as seguintes alterando apenas seu conteúdo.
Fonte: Coleção Info, especial Dreamweaver (2005), p. 62.
Edição feita por: Fernando C, 05/05/2009, 10:17.
