Disciplina: Tópicos Avançados de TI
Unidade IV: Desenvolvimento para a WWW
Prof.: Mario Filho
E-mail: [email protected]
Período: 7º. SIG - ADM
Encontro 13
17. Construindo um Web Site com
o Nvu
Trabalho para o 2º. Bimestre.

17. Construindo um
Web Site com o Nvu
Prof. Mario Filho
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
17.2. Criando a Página Principal

Usando o Nvu, crie uma página igual a
página do slide seguinte...
Prof. Mario Filho
Prof. Mario Filho
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
Prof. Mario Filho
Estrutura do Web Site:
index.html
quem_somos.html
contato.html
produtos.html
Prof. Mario Filho
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 subpáginas através de links.
Prof. Mario Filho
Prof. Mario Filho
Prof. Mario Filho
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
Prof. Mario Filho
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
Prof. Mario Filho
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
17.5. Formatando a Página
Prof. Mario Filho
Prof. Mario Filho
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
Prof. Mario Filho
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
Prof. Mario Filho
Prof. Mario Filho
17.6. Inserindo Tabelas

Agora vamos utilizar o recurso da Tabela
para formatar a página Quem Somos...
Prof. Mario Filho
Prof. Mario Filho
Prof. Mario Filho
Trabalho para
o 2º. Bimestre
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
Trabalho para o 2º. Bimestre.
Após criar o site, enviar um e-mail para
[email protected] 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
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
FIM