Construção de Páginas html com o editor NVU - ufrgs.br · clique no menu Tools e escolha opção Extensions, como mostra a Figura 2. Figura 2 ... Siga a mesma orientação para

1

_________________________________________________________________________________________________

Tutorial: Construção de páginas HTML com o Editor NVU

Construção de Páginas html com o

editor NVU

Crie e edite páginas html com um editor gratuito.

APRESENTAÇÃO

CONHEÇA O EDITOR DE PÁGINAS HTML NVU

NVU é uma ferramenta que permite criar e editar páginas HTML. Dentre os editores gratuitos hoje disponíveis, o NVU é o sucessor do Netscape Composer. Você pode obter uma cópia no endereço do projeto em http://www.net2.com/nvu/download.html. Copie o arquivo para seu computador e realize a instalação, seguindo as orientações apresentadas.

A tela inicial do NVU (na versão original, em inglês) é mostrada na Figura 1.

Figura 1 - Tela inicial do NVU em inglês

Curso de Formação de Professores em Tecnologia de Informação e de Comunicação Acessível

http://www.net2.com/nvu/download.html

2

_________________________________________________________________________________________________


PASSO 1

CONVERTA A INTERFACE DO NVU PARA A LÍNGUA PORTUGUESA Existe um procedimento simples para converter a interface do NVU de inglês para português. Abra o NVU, clique no menu Tools e escolha opção Extensions, como mostra a Figura 2.

Figura 2 - Abrindo o menu Extensions para instalar o conversor

Na janela apresentada, clique no botão Install, como assinalado na Figura 3.

Figura 3 - Janela Extensions que permite instalar o conversor

3

_________________________________________________________________________________________________


Procure no DVD do livro a pasta na qual está armazenado o arquivo nvubr.xpi, selecione (clique sobre ele) e depois clique em Abrir, como mostra a Figura 4.

Figura 4 - Procurando o arquivo para instalar o conversor

Para finalizar, clique em Install Now (Figura 5).

Figura 5 - Janela de Instalação do conversor

4

_________________________________________________________________________________________________


Ao finalizar o sistema mostrará a janela (Figura 6) avisando que o pacote de idioma foi instalado.

Figura 6 - Janela de aviso da Instalação do conversor

Feche o programa NVU e abra-o novamente para que ele apareça no idioma da língua portuguesa, como na Figura 7.

Figura 7 - Janela inicial do NVU em português

5

_________________________________________________________________________________________________


PASSO 2

EXPLORE OS RECURSOS DO NVU Na Barra de Títulos encontra-se o nome do arquivo e o nome do aplicativo. A Figura 8 mostra o exemplo de um arquivo aberto no NVU, mas que ainda não foi salvo e, portanto, não lhe foi atribuído um nome ainda.

Figura 8 - Barra de Titulo do NVU

Na Barra de Menus (Figura 9) encontram-se todos os recursos do NVU. Clicando sobre o nome do menu desejado é possível ver todas as possibilidades oferecidas por este. Ex. no menu Arquivo encontramos a opção Salvar, mantendo o modelo adotado em outros programas para o sistema operacional Windows.

Figura 9 - Barra de Menus

Na Barra de Ferramentas (Figura 10) encontram-se os botões que permitem acessar com maior agilidade os recursos mais utilizados do NVU, evitando o percurso pelo interior dos menus.

Figura 10 - Barra de Ferramentas

PASSO 3

CRIE E SALVE PÁGINAS A tela inicial do programa, já mostrada anteriormente na Figura 7, apresenta uma grande área em branco, na qual é possível digitar diretamente o seu texto e utilizar os recursos da barra de ferramentas, semelhante a um editor de textos.

DICA 1: Criação de pasta para salvar/armazenar os arquivos (páginas, imagens, vídeos, animações) O ideal é você, antes de iniciar a criação de suas páginas, criar uma nova pasta em seu computador, com um nome que caracterize o nome do seu site, por exemplo “meusite”. Salve sempre todos os arquivos e imagens nesta pasta.

Barra de Menus

6

_________________________________________________________________________________________________


Mas antes de qualquer outra ação, você deve salvar o seu arquivo e dar um nome a ele. Para isso, clique no menu Arquivo e, a seguir, na opção Salvar (Figura 10).

Figura 11 - Salvando sua página pela primeira

vez Você então será solicitado a informar o Título de sua página (Figura 12), ou seja, o nome que aparece na parte superior de sua página quando apresentada no navegador.

Figura 12 - Atribuindo um título a sua página web

Por exemplo, se você denominar sua página como “página inicial” e visualizá-la no navegador (como o Internet Explorer ou Firefox), verá esse texto no topo da janela, como apresenta a Figura 13.

Figura 13 -Visualizando o título dado a sua página web na Barra de Títulos

Em seguida, aparecerá a janela Salvar página como (isto só acontece na primeira vez em que você for salvar o seu arquivo, pois ele ainda não tem nome!). Procure a pasta criada e salve o arquivo, digitando o nome do arquivo desejado (Figura 14).

Figura 14 - Salvando sua primeira página

Digite aqui o nome

do arquivo a ser

salvo.

7

_________________________________________________________________________________________________


Para salvar as demais páginas que você criar, repita o procedimento. Procure utilizar nomes fáceis de lembrar e siga as orientações da Dica 3.

PASSO 4

ABRA ARQUIVOS A opção abrir arquivos nos permite abrir um arquivo já existente, criado por você ou salvo da Internet. Para abrir um arquivo (Figura 15), clique no menu Arquivo e, a seguir, na opção Abrir...

Figura 15 - Abrindo um arquivo já existente

Procure o arquivo na pasta em que o salvou anteriormente, clique sobre ele para selecioná-lo e depois na opção Abrir. Ele será apresentado na tela principal do NVU, onde você poderá modificá-lo e salvar as alterações realizadas.

DICA 2 - Uso do nome “index.htm” ou “index.html” como primeira página

A primeira página HTML de seu site deve ser salva com o nome index.htm. Isso se

deve ao fato de que os navegadores procuram por esta página no servidor e

mostram automaticamente, sem a necessidade de digitarmos esse nome no

endereço de um site da Internet!

DICA 3 - Acentuação gráfica, espaços em branco e letras maiúsculas nos

nomes dos arquivos

Evite o uso de acentuação gráfica e símbolos como “ç”,”ã”, “ô”, “é”, “à” , “$”, etc.,

ao salvar e nomear os seus arquivos. Da mesma forma, recomenda-se o uso de

somente letras minúsculas nos nomes dos arquivos.

Por exemplo: ao invés de salvar um arquivo com o nome “Informática na

Educação.htm”, utilize o nome “informática_na_educacao.htm”. Isso facilitará

depois a criação dos “links” entre suas páginas!

8

_________________________________________________________________________________________________


PASSO 5

UTILIZE A BARRA DE FORMATAÇÃO

A Barra de Formatação (Figura 16) é composta por atributos relacionados à formatação do texto, vamos conhecer os principais, sendo eles (fonte, tamanho, estilo, cor e direção), (aumentar ou diminuir recuo), (plano de fundo e cores e propriedades da página).

Figura 16 - Barra de Menus Formatar

FORMATE O TEXTO (FONTE, TAMANHO, COR E DIREÇÃO) Para modificar fonte, tamanho, estilo e cor é preciso selecionar o texto que terá seus atributos modificados. Você faz isso, passando o mouse por cima do texto desejado, de forma que ele fique destacado, como na Figura 17.

Figura 17 - Selecionando o texto

Clicando no menu Formatar e escolhendo a opção Fonte , será mostrada uma relação de fontes (instaladas em seu computador) e que podem ser utilizadas na formatação de seu texto.

DICA 4 – Tipos de fonte

As fontes mais comumente utilizadas são Times New Roman, Verdana, Arial

e Tahoma.

Estas fontes estão normalmente instaladas em quase todos os computadores,

garantindo que suas páginas sejam visualizadas em outros computadores da

mesma forma que você editou no seu.

9

_________________________________________________________________________________________________


Para modificar o tamanho e o estilo do texto, clique no menu Formatar e selecione Fonte. Você poderá diminuir ou aumentar o tamanho da fonte selecionada, como mostra a Figura 18.

Figura 18 – Alterando o tamanho do texto

DICA 5: O mesmo efeito pode ser conseguido clicando diretamente nos botões da barra de menu

diminuir a fonte

aumentar a fonte

Para Formatar os Estilos do texto, selecione no menu a opção desejada, como na Figura 19.

Figura 19 - Alterando o estilo do texto

DICA 6 – Estilos de fonte - sublinhado

Evite usar o recurso sublinhado como forma de destaque em seus textos,

pois este é um recurso que indica um link nos navegadores e pode confundir

seu leitor. Prefira o itálico ou negrito para diferenciar alguma palavra em seus

textos.

10

_________________________________________________________________________________________________


Para modificar a cor do texto, clique no menu Formatar e selecione a opção Cor do texto... (Figura 20).

Figura 20 - Alterando a cor do texto

Abrirá a janela Cor do texto (Figura 21), onde então você escolherá a cor desejada. Ao concluir, clique em OK.

Figura 21 - Escolhendo e alterando a Cor do

texto

Você também pode clicar direto nos botões da barra de menu:

FAÇA O ALINHAMENTO DAS PÁGINAS

Na barra de menus, você encontra os botões:

Cor do texto Cor do plano

de fundo

Cor de realce

do texto

Aplicar ou remover

lista numerada

Aplicar ou remover

lista com marcadores

Alinhar à

esquerda

Alinhar à

direita

Centralizar Justificar Recuar texto (mover

para a direita)

Diminuir recuo (mover

para a esquerda)

11

_________________________________________________________________________________________________


Ao clicar no menu Formatar, depois em Alinhamento , você pode escolher dentre quatro opções de alinhamento do texto: esquerdo, centralizado, direito ou justificado (Figura 22).

Figura 22 - Escolhendo o alinhamento do texto

ALTERE PLANO DE FUNDO E CORES

Para alterar o plano de fundo e as cores da página, clique no menu Formatar e selecione a opção Plano de fundo e cores... (Figura 23).

Figura 23 - Modificando o Plano de

fundo e cores da sua página

12

_________________________________________________________________________________________________


Na janela Plano de fundo e cores da página, você pode escolher entre (deixar as cores padrão do internauta) ou usar cores personalizadas (Figura 24). Depois de selecionada as cores clicar no botão OK. Você também pode escolher uma imagem para inserir como fundo de suas páginas.

Figura 24 - Modificando o Plano de fundo e cores da sua página

ALTERE AS PROPRIEDADES DA PÁGINA Para alterar as Propriedades da página, ou seja, alterar... clique no menu Formatar e selecione a opção Propriedades da página ... (Figura 25). Através dessa opção, você pode reformular (ou informar, se ainda não fez) o título de sua página, o autor, uma breve descrição e outras opções, conforme apresentado na Figura 26.

Figura 25 - Modificando as

Propriedades da página

DICA 7 – Imagens de fundo

Quando você seleciona uma imagem de fundo para sua página, ela é utilizada

como um “carimbo”, sendo repetida tantas vezes quantas forem necessárias

para preencher o fundo. Selecione imagens de cores suaves e que não

confundam a leitura do texto!

Clicar sobre a cor para alterá-la

Escolher uma imagem para

colocar de plano de fundo

13

_________________________________________________________________________________________________


Figura 26 - Modificando as Propriedades da página

INSIRA IMAGENS As imagens a serem inseridas em suas páginas HTML devem ser salvas na mesma pasta que as páginas que foram criadas, antes de incluí-las na mesma.

Para inserir imagens na sua página, agora que elas foram salvas em sua pasta, basta:

1. Colocar o cursor no local aonde a imagem será inserida no texto;

2. Clicar no ícone ou ;

3. Será apresentada uma janela como da Figura 27;

DICA 8: Acentuação gráfica, espaços em branco e letras maiúsculas nos nomes

dos arquivos das imagens

Evite o uso de acentuação gráfica e símbolos como “ç”,”ã”, “ô”, “é”, “à” , “$”, etc., ao

salvar e nomear os suas imagens também. Siga a mesma orientação para o salvamento

de outros arquivos.

14

_________________________________________________________________________________________________


Figura 27 - Buscando a imagem no seu computador

4. Selecionar a imagem desejada na pasta onde foi salva em seu computador (Figura 28) e depois

no botão Abrir.

Figura 28 – Selecionando uma imagem no seu computador

DICA 9: Acentuação gráfica, espaços em branco e letras maiúsculas nos nomes

dos arquivos das imagens

Evite o uso de acentuação gráfica e símbolos como “ç”,”ã”, “ô”, “é”, “à” , “$”, etc., ao

salvar e nomear os suas imagens também. Siga a mesma orientação para o salvamento

de outros arquivos.

Clique para procurar a imagem

desejada em seu computador

15

_________________________________________________________________________________________________


5. Será mostrada uma janela como da Figura 29, para que você conclua a configuração e insira sua imagem. Ao concluir, clique no botão OK.

Figura 29 – Propriedades da imagem inserida em sua página

6. Clicando na aba Dimensões (ainda na Figura 29), é possível alterar as dimensões da imagem selecionada.

DICA 10: Endereço relativo ou absoluto

O endereço relativo é referente apenas à localização da pasta e ao nome do arquivo.

Se aparecer o caminho do seu computador no código (como por exemplo:

“file:///C://Meus%20documentos/tutorialNVU/cozinheiro.gif”, o link não funcionará após a

publicação, pios indica uma pasta em nosso computador e que não existe no servidor

nem no computador de quem for visualizar nossa página. Neste caso verifique:

se a imagem está salva na mesma pasta que a imagem inserida ou

se você desabilitou o quadradinho ao lado da opção “O endereço é relativo ao da

página.

Corrija, se for o caso, o problema e insira novamente a imagem.

16

_________________________________________________________________________________________________


Figura 30 - Alterando o tamanho de uma imagem selecionada

Figura 46 – Janela para alteração das Propriedades de uma imagem

INSIRA TABELAS As tabelas são bastante utilizadas, não só como forma de apresentar dados, mas como forma de organizar o conteúdo. Para inserir uma tabela em sua página:

1- Clique no menu Inserir e selecione a opção Tabela na Barra de Menu

ou clique diretamente no botão .

Será mostrada a janela Inserir tabela, como na Figura 31. Nesta janela, você poderá selecionar o número de colunas e linhas simplesmente selecionando com o mouse. Sua seleção ficará mostrada através da coloração azul forte. Ao concluir, clique no botão OK.

DICA 11: Alterando o tamanho de uma imagem selecionada

Você pode diminuir a imagem (aumentando ou diminuindo a largura ou altura) da

mesma. Para tanto clique sobre o número relativo aos pontos e modifique-o, por

exemplo, para 300. Deixe a opção Manter a proporção marcada para que a imagem

não fique desproporcional.

Você também pode alterar o tamanho da imagem após sua inserção no texto, clicando

sobre ele e movimentando as alças da imagem.

Em nenhuma das duas opções haverá alteração no tamanho da imagem, somente na

sua visualização.

17

_________________________________________________________________________________________________


Figura 31 - Inserindo uma tabela

Também é possível, clicando na aba Detalhado, escolher o número de Linhas e Colunas, a Largura da tabela e a espessura da Borda, como mostrado na Figura 32.

Figura 32 - Definindo o número de linhas e colunas de uma tabela

Através da aba Célula (Figura 33) é possível escolher ou modificar o Alinhamento horizontal, Alinhamento vertical, selecionar Quebrar ou Não quebrar o texto, assim como o espaçamento entre as células.

Figura 33 - Escolhendo ou modificando as propriedades de uma célula

DICA 12: Uso da borda em uma tabela

Caso a tabela seja apenas para organizar o conteúdo na janela e você não quiser que as

linhas e colunas apareçam, escolha a espessura 0 no item Borda.

18

_________________________________________________________________________________________________


Veja a tabela inclusa na área de edição. (figura 50) Você pode alterar a localização da tabela e suas propriedades. Para alterar selecione a tabela e clique com o botão direito do mouse na opção Propriedades para célula (figura 51)

Figura 50 – Visualização da tabela que foi inserida

Figura 51 – Modificando as propriedades da tabela e da célula

19

_________________________________________________________________________________________________


Na aba Tabela você pode:

Figura 52 – Modificando as propriedades da tabela

Após fazer as alterações clique no botão Aplicar e depois OK.

Clicando no ícone abre-se a janela Cor do plano de fundo da tabela para você alterar, conforme figura 52, escolha a cor e clique em OK.

Figura 52 – Modificando a cor do plano de fundo da tabela

1 - Altera o número e tamanho em (porcentagem da janela ou pontos) das Linhas e Colunas. 2- Configurar o tamanho da borda. 3 – Configurar o espaçamento. 4 – Configurar a formatação da tabela (Esquerdo, Centralizado ou Direito). 5 - Mudar a cor do plano de fundo da tabela

20

_________________________________________________________________________________________________


Na aba Células você pode:

Figura 53– Modificando as propriedades das células

Você pode também através da seleção da tabela e clicando com o botão direito do mouse Inserir na tabela (linha, coluna e célula em cima ou embaixo, antes ou depois) conforme figura 54, selecionar na tabela (tabela, linha, coluna, célula ou todas as células) figura 55 e Excluir da tabela (tabela, linhas, colunas, células ou conteúdo da célula) figura 56.

Figura 54 – Inserindo na tabela (tabela, linha em cima ou embaixo, coluna e célula antes ou depois)

Figura 55 – Selecionando na tabela (tabela, linha, coluna, célula ou todas as células)

Seleção do que terá suas

propriedades modificadas.

Não esqueça de

selecionar a caixa na

qual as propriedades

serão modificadas.

21

_________________________________________________________________________________________________


Figura 56 – Excluindo da tabela (tabela, linhas, colunas, células ou conteúdo da célula)

Você pode ainda mesclar duas células de uma linha ou coluna. Para tanto selecione as células e clique sobre Combinar as células selecionadas (figura 56)

Figura 57 – Combinando duas células selecionadas

Você pode alterar o tamanho de uma tabela ou de suas células selecionando-a e arrastando com o cursor a mesma para que ela fique no tamanho desejado (figura 58).

Figura 58 – Aumentando o tamanho da tabela

22

_________________________________________________________________________________________________


INSIRA LINKS

Links são os vínculos (ligações) entre textos e outros textos, textos e imagens, imagens e textos, textos e outros tipos de arquivos, etc... Para inserir um link é preciso selecionar o texto ou a imagem que servirá como link (figura 59).

Figura 59 – Selecionando o texto que terá um link

(1) Clique em Inserir/Link... ou no botão Abrirá a janela Propriedade do link na qual você deve:

(1) selecionar o arquivo caso o link seja para outra página ou arquivo feito por você (2) digitar o endereço da Internet (caso seja o direcionamento para um link externo) (3) digitar o endereço de email e selecionar a opção O endereço é de email.

Figura 60 – Janela Propriedades do link

23

_________________________________________________________________________________________________


Para inserir link para outra página feita por você, clique no botão Selecionar arquivo... e procure na pasta criada por você o mesmo, clicando sobre ele e depois em Abrir.

Figura 61 – Incluindo link para outro arquivo criado para compor o seu site

Figura 62 – Link criado para o arquivo (página) www.html

Para inserir link para um endereço da Internet já existente é preciso digitar ou copiar (Crtl + C) e colar (Crtl + V) o endereço conforme mostrado na figura 63

Figura 63 – Link para um endereço da Internet

OBS: Este processo mostrado acima é igual para inserir links para outros arquivos, tais como (texto,

apresentação, pdf, imagens, etc...).

http://www.html/

24

_________________________________________________________________________________________________


Para inserir link para um e-mail, digite o endereço e selecione a opção O endereço é de e-mail conforme figura 64.

Figura 64– Link para um endereço de e-mail

MODOS DE VISUALIZAÇÃO

Os modos de visualização podem ser: Normal, Exibir Tags, Código-fonte e Visualizar. Na visualização Normal (figura 66) você tem um espaço de criação e edição de páginas semelhante a um editor de textos, o que é feito neste modo é automaticamente incluído pelo programa como forma de código na visualização Código-fonte.(figura 67) O modo de Visualização (figura 68) permite que você veja como a página será exibida nos navegadores, desta forma, é possível que nem tudo que aparece na edição esteja da mesma forma na visualização e sejam necessários alguns ajustes. O modo Exibir Tags, mostra as marcações feitas através de tags (figura 69).

Figura 65 – Modos de visualização das páginas

25

_________________________________________________________________________________________________


Figura 66 – Modo de visualização Normal das páginas

Figura 67 – Modo de visualização Código-fonte

26

_________________________________________________________________________________________________


Figura 68 – Modo de visualização Visualizar

Figura 69 – Modo de visualização Exibir Tags

Documents

Construção de Páginas html com o editor NVU - ufrgs.br · clique no menu Tools e escolha opção Extensions, como mostra a Figura 2. Figura 2 ... Siga a mesma orientação para