Encontro 13 17. Construindo um Web Site com o Nvu Trabalho para o 2º. Bimestre.

1. Disciplina: Tópicos Avançados de TIUnidade IV: Desenvolvimento para a WWWProf.: Mario FilhoE-mail: pro@mariofilho.com.br Período: 7º. SIG - ADM Encontro 13 17. Construindo um Web Site com o Nvu Trabalho para o 2º. Bimestre.

2. 17. Construindo um Web Site com o Nvu

3. Prof. Mario Filho

4. 17.1. Criando a Pasta do Web Site • O primeiro passo, é criar uma pasta onde colocaremos os arquivos do web site. • Crie na Área de Trabalho uma pasta chamada “website”. • Dentro desta pasta crie outra pasta com o nome “imagens”, que será usada para guardar todas as imagens do site. Prof. Mario Filho

5. 17.2. Criando a Página Principal • Usando o Nvu, crie uma página igual a página do slide seguinte... Prof. Mario Filho

6. Prof. Mario Filho

7. 17.3. Criando as Sub-páginas • O nosso site terá a seguinte estrutura: • Página Principal (index.html) • Sub-Página “Quem Somos”: quem_somos.html • Sub-Página “Produtos”: produtos.html • Sub-Página “Contato”: contato.html Dica: para facilitar, podemos editar a página principal, que já criamos, e o recurso “Salvar Como” ou “Save As...” Prof. Mario Filho

8. Prof. Mario Filho

9. Estrutura do Web Site: index.html quem_somos.html contato.html produtos.html Prof. Mario Filho

10. 17.3 Criando os Links • Após as 4 páginas (1 Página Principal e 3 Sub-páginas) estarem prontas e salvas. A Página Principal deverá chamar as sub-páginas através de links. Prof. Mario Filho

11. Prof. Mario Filho

12. Prof. Mario Filho

13. Exercício 1: • Após os links da Página Principal estarem funcionando, crie nas sub-páginas um link “< Voltar” que sirv apara voltar para a Página Principal. • Exemplo no próximo slide... Prof. Mario Filho

14. Prof. Mario Filho

15. 17.4. Inserindo Imagens • O primeiro passo é colocar a imagem que fará parte do site, dentro da pasta “imagens” que criamos no início. • Depois é só clicar no ícone “Image” ou ir em: • Insert / Image... • Localize o arquivo com a imagem “Choose File...” • Escreva um texto alternativo (alternate text) ou não e clique em OK. Prof. Mario Filho

16. Prof. Mario Filho

17. 17.5. Formatando a Página • Vamos agora mudar as cores padrões da nossa página: • Format / Page Colors and Background... • Aparecerá o seguinte quadro... Prof. Mario Filho

18. 17.5. Formatando a Página Prof. Mario Filho

19. Prof. Mario Filho

20. 17.5. Formatando a Página • Na Internet também é possível achar vários papéis de fundo (backgrounds) para usar em nossos web sites. • Exemplo: http://www.backgroundlabs.com/ • Também é possível copiar o papel de parede de outros sites através do comando “Copiar Plano de Fundo” (botão direito do mouse). Prof. Mario Filho

21. Prof. Mario Filho

22. 17.6. Inserindo Tabelas • As Tabelas servem basicamente para duas coisas: • Organizar uma listagem; • Ajudar na formatação da página. • Vamos usar o primeiro caso para criar nossa lista de produtos da página Produtos... Prof. Mario Filho

23. Prof. Mario Filho

24. Prof. Mario Filho

25. 17.6. Inserindo Tabelas • Agora vamos utilizar o recurso da Tabela para formatar a página Quem Somos... Prof. Mario Filho

26. Prof. Mario Filho

27. Prof. Mario Filho

28. Trabalho parao 2º. Bimestre

29. Trabalho para o 2º. Bimestre. Criar um site comercial imaginário, para qualquer segmento do comércio, dentro da estrutura abaixo: • Página Principal • Quem Somos • Produtos • Contato • Hospedá-lo em um endereço no XPG. Prof. Mario Filho

30. Trabalho para o 2º. Bimestre. • Após criar o site, enviar um e-mail para pro@mariofilho.com.br informando o endereço do site na Internet e o nome completo do(a) aluno(a). • Criar o site, hospedar e enviar o e-mail até o dia: 16/05/2010 (domingo). • O trabalho é para ser feito individualmente! Prof. Mario Filho

31. Trabalho para o 2º. Bimestre. • Valor do trabalho: 3,5 pontos. • 1,0 Ponto: Entrega no prazo. • 1,0 Ponto: Funcionamento do site. • 1,5 Ponto: criatividade e uso dos recursos. • Agora é só começar! Bom trabalho! Prof. Mario Filho

32. FIM