Encontro Construindo um Web Site com o Nvu

Apresentação em tema: "Encontro Construindo um Web Site com o Nvu"— Transcrição da apresentação:

1 Encontro 13 17. Construindo um Web Site com o Nvu
Disciplina: Tópicos Avançados de TI Unidade IV: Desenvolvimento para a WWW Prof.: Mario Filho 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: 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 para o 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 para informando o endereço do site na Internet e o nome completo do(a) aluno(a). Criar o site, hospedar e enviar o 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