Construção de Páginas html com o editor NVU

1 Curso de Formação de Professores em Tecnologia de Informação e de Comunicação Acessível APRESENTAÇÃO CONHEÇA O EDITOR DE PÁGINAS HTML NVU Construção de Páginas html com o editor NVU Crie e edite páginas html com um editor gratuito. 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

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. Barra de Menus 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.

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). Digite aqui o nome do arquivo a ser salvo. Figura 14 - Salvando sua primeira página

7 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! 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. 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 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.

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. DICA 5: O mesmo efeito pode ser conseguido clicando diretamente nos botões da barra de menu diminuir a fonte aumentar a fonte Figura 18 Alterando o tamanho do texto 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: Cor do texto Cor do plano de fundo Cor de realce do texto FAÇA O ALINHAMENTO DAS PÁGINAS Na barra de menus, você encontra os botões: Aplicar ou remover lista com marcadores Centralizar Justificar Recuar texto (mover para a direita) Aplicar ou remover lista numerada Alinhar à esquerda Alinhar à 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. Clicar sobre a cor para alterá-la Escolher uma imagem para colocar de plano de fundo Figura 24 - Modificando o Plano de fundo e cores da sua 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! 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

13 INSIRA IMAGENS Figura 26 - Modificando as Propriedades da página 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. 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. 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;

14 Clique para procurar a imagem desejada em seu computador 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.

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 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. 6. Clicando na aba Dimensões (ainda na Figura 29), é possível alterar as dimensões da imagem selecionada.

16 Figura 30 - Alterando o tamanho de uma imagem selecionada 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. 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.

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 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. 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

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: 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 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

20 Na aba Células você pode: Seleção do que terá suas propriedades modificadas. Não esqueça de selecionar a caixa na qual as propriedades serão modificadas. 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)

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 OBS: Este processo mostrado acima é igual para inserir links para outros arquivos, tais como (texto, apresentação, pdf, imagens, etc...). 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

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