Vamos fazer passo-a-passo:

1. Criar o arquivo HTML.

2. Escolher a opção "Página em branco". Será criado o arquivo nova_pagina_1.htm. Salvar como teste1.htm

3. Criar o arquivo CSS

4. Escolher a opção 'Folha de estilos normal'. Será criado o arquivo nova_pagina_1.css. Salvar como teste1.css

5. Vincular o CSS ao arquivo HTML. Estando no arquivo HTML, formatar Links de folha de estilos.

6. Adicionar o arquivo teste1.css.

7. Para criar o quadro ao lado, primeiro é preciso escrever "Redes Informatizadas de Comunicação e Informação - 2006/1".



8. Criar o estilo do quadro. Vamos chamar este quadro superior de quadro_topo.

a) Em listas, escolher "Estilos definidos pelo usuário"

b) Após, clicar no botão "Novo".



c) O nome do estilo será "quadro_topo" e deverá ser aplicado a todo parágrafo.

d) Após, formatar Fonte, Parágrafo, Borda. Este estilo possui borda dupla, cor da borda (= cor de primeiro plano) é rosa #FF35FF, cor do preenchimento (=cor de segundo plano) é rosa mais claro #FFDDFF, fonte arial normal tamanho 12 pt, parágrafo centralizado.



9. Com o estilo quadro_topo criado, é possível aplicá-lo no arquivo HTML. Para isso, basta salvar o arquivo CSS, ir para o arquivo HTML, posicionar sobre a frase e aplicar o estilo.




10. Salvar o arquivo HTML e visualizar a página em um navegador (por exemplo, no Internet Explorer - clicar no ícone ao lado do ícone da impressora, no menu do FrontPage).



11. Ao pressionar ENTER no quadro_topo, a tendência do estilo é continuar como quadro_topo. Por isso, certifique-se que o estilo está "normal".

12. Estando no estilo "Normal", escrever: Principal, Programa, Agenda, Material de apoio, Avaliação, Bibliografia, conforme tela ao lado.

Pressionando as teclas SHIFT e ENTER



Atenção: ao invés de pressionar a tecla Enter, deve-se pressionar as teclas Shift e Enter, simultaneamente.

Pressionando somente a tecla ENTER




13. Criar o estilo do quadro do menu.

a) O nome do estilo será "quadro_menu" e deverá ser aplicado a todo parágrafo.

b) Formatar Fonte, Parágrafo, Borda. Este estilo possui borda sólida, cor da borda é #FF35FF, cor de preenchimento é branca, fonte arial normal tamanho 12 pt, parágrafo à esquerda, espaçamento entre linhas é de 1,5 linhas, e com 1 de espaçamento antes.

14. Com o estilo quadro_menu criado, é possível aplicá-lo no arquivo HTML. Para isso, basta salvar o arquivo CSS, ir para o arquivo HTML, posicionar sobre as opções do menu e aplicar o estilo.




Atenção: quem pressionou SHIFT ENTER simultaneamente, terá a seguinte formatação.




Atenção: quem pressionou ENTER após cada item do menu, terá a seguinte formatação. Para corrigi-la, deletar todos os ENTER e inserir SHIFT ENTER. Salvar e visualizar.



15. Com o estilo quadro_menu criado, é necessário alterar o tamanho do seu quadro. Para isso, no arquivo CSS, escolher o estilo quadro_menu e modificar sua formatação de posição.

a) Disposição do texto: nenhum

b) Estilo de posicionamento: nenhum

c) Largura: 20%

d) Altura: 80%



16. Para posicionar o quadro_menu mais próximo ao quadro_topo é necessário definir esta aproximação alterando os dados de formatação de posição. Experimente:

a) Estilo de posic.: absoluto

b) Parte superior: 40%

c) Verifique o que aconteceu. Altere o tamanho da janela do navegador e veja o que acontece com a localização do quadro_menu.

d) Altere parte superior de 40% para 40px.

e) Verifique o que aconteceu. Altere o tamanho da janela do navegador e veja o que acontece com a localização do quadro_menu.



17. Criar o estilo do quadro do centro.

a) O nome do estilo será "quadro_central" e deverá ser aplicado a todo parágrafo.

b) Formatar somente Borda. Este estilo possui borda sólida, cor da borda é #FF35FF, cor de preenchimento é branca.

c) Este quadro fica abaixo do quadro_topo e deverá ocupar toda a tela, abaixo deste quadro, encobrindo o quadro_menu.

Para tanto, repete-se todas as características do quadro_menu e altera-se somente a largura que passa a ocupar 100% da tela.



18. Alterando a ordem entre os quadros. Queremos que o quadro_central vá para trazer do quadro_menu. Para isso, devemos alterar a ordem z do quadro_central. Isso é feito no CSS, formatando posição deste quadro. Para ir para trás, deverá receber o valor -1.



19. Salvar o arquivo CSS e visualizar.