Queridas(os) alunas(os)!
Hoje aprenderemos de modo bem prático a utilizar HTML com CSS de uma maneira facilitada utilizando o Dreamweaver.
A ideia da aula é que vocês compreendam como funciona o mecanismo entre essas duas linguagens de programação.
Vamos lá ao passo a passo:
Antes de iniciarmos, lembremo-nos de sempre criar uma pasta na Área de Trabalho (Desktop) ou na pasta Meus Documentos (ou somente Documentos) para salvarmos os nossos arquivos do dia.
CRIANDO O ARQUIVO HTML
1º Passo: Clique no ícone do DW para abrir o programa:
Nota: a versão que utilizo é o CS6 em inglês, porém na versão CS5 os passos são os mesmos, o diferencial é o idioma da versão que vocês utilizam atualmente estar em Português. Atente-se a isso.
2º Passo: Clique em File >> New >> HTML >> Create
3º Passo: Copia o código a seguir e cole no code do DW
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Posicionamento com CSS</title>
<link rel="stylesheet" href="posicionamento.css" type="text/css">
</head>
<body>
<div class="esqdacima">
<p>Primeiro Quadro: Esquerda em Cima</p>
</div>
<div class="esqbaixo">
<p>Segundo Quadro: Esquerda em Baixo</p>
</div>
<div class="dircima">
<p>Terceiro Quadro: Direita em Cima</p>
</div>
<div class="dirbaixo">
<p>Quarto Quadro: Direita em Baixo</p>
</div>
</body>
</html>
4º Passo: Salve o Arquivo em: File >>Save As >> Abra a pasta que você criou e salve o arquivo como:
Posicionamento.html
CRIANDO O ARQUIVO CSS
5º Passo: Clique em New >> File >> CSS >> Create
6º Passo:
Como já visto em aulas anteriores, iremos criar regras CSS
Clique em CSS Styles >> New CSS Rule (indicado pelo sinal de +)
7º Passo:
Após aberta a janela, digite esqcima indicando que o nome da nossa regra será do lado esquerdo em cima. Clique em ok.
8º Passo: Na próxima janela, altera os valores das propriedades para a obtenção do resultado esperado.
.esqcima {
background-color: #F00;
height: 200px;
width: 200px;
float: left;
position: absolute;
left: 0px;
top: 0px;
}
9º Passo: Repita os passos 6, 7 e 8 alterando o nome das regras para: esqbaixo, dircima, dir baixo, e insera outros valores para obter a diferenciação de um quadro para outro.
10º Salve o arquivo dentro da sua pasta em: File >> Save As >> posicionamento.css
O código para todos os quadros nas regras do CSS é o seguinte:
.esqcima {
background-color: #F00;
height: 200px;
width: 200px;
float: left;
position: absolute;
left: 0px;
top: 0px;
}
.esqbaixo {
background-color: #060;
float: left;
height: 200px;
width: 200px;
position: absolute;
bottom: 0px;
left: 0px;
}
.dircima {
background-color: #FF0;
height: 200px;
width: 200px;
float: right;
position: absolute;
top: 0px;
right: 0px;
}
.dirbaixo {
background-color: #00F;
height: 200px;
width: 200px;
position: absolute;
float: right;
right: 0px;
bottom: 0px;
}
O resultado alcançando será esse...
Durante a aula, explanaremos melhor esses conceitos.
Até a próxima!!!
