Exercício no Dreamweaver

O objetivo deste exercício é trabalhar com HTML e CSS para produzir o seguinte resultado:


As instruções para este exercício estão no link http://web.fe.up.pt/~ssn/disciplinas/cdi/css/27.html, proposto pelo prof. Sérgio Sobral Nunes.

Passos no Dreamweaver:

1. Configure um site.
2. Crie um arquivo HTML com o nome posicionamento.html.
3. Abra o arquivo posicionamento.html e cole o código abaixo:



4. Crie um arquivo CSS com o nome posicionamento.css
5. Abra o arquivo posicionamento.css
6. Acesse o painel CSS:

7. No painel CSS, crie uma nova classe:

(a. Imagem do painel)
 (b. Imagem da base do painel CSS. Para criar uma nova regra, clique no ícone +, destacado na figura)

8.Coloque o nome esqcima no campo Selector Name, conforme indica a imagem abaixo. Dê Ok.


9. Altere os valores das propriedades para obter o resultado esperado da imagem apresentada no início do post.
10. Repita os passos 7, 8 e 9 para as três outras classes: esqbaixo, dircima e dirbaixo.

Resposta do exercício para o CSS (posicionamento.css):


Código no Code Pen:

See the Pen omBzH by Daniela Carvalho (@danicarvalhomf) on CodePen




Referência para estudo:


NUNES, S. S. Comunicações Digitais e Internet. Disponível em <http://web.fe.up.pt/~ssn/disciplinas/cdi/css/1.html>. Acesso em Set 2013.