Material didático Projeto Web Prof. Carlos 1 PROJETO WEB

Transcrição

1 Material didático Projeto Web Prof. Carlos 1 PROJETO WEB Em dupla: (se sobrar um aluno poderemos ter apenas um trio). Construir um site de 10 páginas, no mínimo, sendo a primeira o INDEX; O site deverá ser para uma micro-empresa Me ou Mini-empresa estabelecida, por exemplo: bares, lanchonetes, cabeleireiros(as), oficinas mecânica, restaurantes, escritórios de advocacias, chaveiros, pizzarias, Quiosques de lanches com a licença da prefeitura, enfim... Uma empresa que ainda não tenha site. Ofereça o seus serviços gratuitamente, sem ônus. Diga que é trabalho de faculdade e que não terá nenhum custo, pelo contrário ele(a) terá uma propaganda grátis. O nome dos alunos devem estar no site como web designers, portanto é de muita responsabilidade, colocar seu nome e publicá-lo. O site deve ser publicado em algum serviço para isso, preferencialmente gratuito, se não houver um gratuito, creio que o valor mínimo para hospedagem é de R$ 9,90 um mês. Não pode ser sites prontos ou semi-prontos, eu vou comparar. As duplas já devem ter escolhido a micro-empresa, pois sempre temos algum conhecido estabelecido. FOTOS: Fotografem tudo o que se faz na empresa para divulgar, obtenha boas fotos no formato.jpeg menores ou em torno de 100KB, são leves e fácil de abrir. Em cada página diga outra coisa que a empresa faz. Fazer uma pesquisa no GOOGLE sobre aquela profissão, para ter subsídios para em uma das páginas contar a história daquela profissão, por exemplo: mecânica história da mecânica desde as primeiras máquinas que surgiram, assim por diante... As duplas já devem me enviar o nome da micro-empresa que irão trabalhar e já ir obtendo todo o material de divulgação desta empresa. Faça um planejamento rigoroso, escrito a mão de como ficará o site, antes de começar a fazê-lo. Aqueles que forem mais criativos, farão excelentes trabalhos. CUIDADO COM OS DIREITOS AUTORAIS, CUIDADO COM PREÇOS NÃO DIVULGUE PREÇOS, NÃO MENTIR MAS PODE OMITIR, CUIDADO COM A ESCRITA EM PORTUGUÊS, O PORTUGUÊS DEVE ESTAR IMPECÁVEL. OS NOMES DE VOCÊS DEVEM ESTAR NO RODAPÉ DO SITE, COMO RESPONSÁVEIS PELO SITE. JÁ DEVEM COMEÇAR...

2 Material didático Projeto Web Prof. Carlos 2 Prof. Carlos CONSTRUÇÃO DE PÁGINAS HTML NO EDITOR NVU SUMÁRIO Apresentação... 3 Construção de Páginas HTML no Editor NVU... Erro! Indicador não definido. Instalando o conversor para modificar a linguagem do NVU para o português3 Ferramentas do NVU... 6 Criando e Salvando páginas... 8 Abrindo Arquivos...10 Utilizando a Barra de Formatação...10 Formatando o Texto (fonte, tamanho, estilo, cor e direção) Alinhamento das Páginas Alterando Plano de fundo e cores Alterando as propriedades da Página Inserindo Imagens...15 Créditos Mary Lúcia Pedroso Konrath Doutoranda do Programa de Pós-Graduação em Informática na Educação - UFRGS Mara Lúcia Fernandes Carneiro Professora do Instituto de Psicologia /UFRGS

3 Material didático Projeto Web Prof. Carlos 3 Apresentação 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 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 2. Figura 1 - Tela inicial do NVU em inglês Existe um procedimento simples para converter a interface do NVU de inglês para português. Para isso, salve em seu computador o arquivo nvubr.xpi, disponível para download em: Agora, clique no menu Tools do NVU e escolha opção Extensions, como mostra a Figura 2.

4 Material didático Projeto Web Prof. Carlos 4 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 Procure no seu computador a pasta na qual foi salvo o arquivo nvubr.xpi, selecione (clique sobre ele) e depois clique em Abrir, como mostra a Figura 4.

5 Material didático Projeto Web Prof. Carlos 5 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 Ao finalizar o sistema mostrará a janela (Figura 6) avisando que o pacote de idioma foi instalado.

6 Material didático Projeto Web Prof. Carlos 6 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 Recursos do NVU

7 Material didático Projeto Web Prof. Carlos 7 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. Barra de Título Figura 8 - Barra de Titulo do NVU Na Barra de Menus 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 10 Barra de Menus Na Barra de Ferramentas encontram-se os botões que permitem acessar com maior agilidade os recursos mais utilizados do NVU, evitando o percurso pelo interior dos menus.

8 Material didático Projeto Web Prof. Carlos 8 Barra de Ferramentas para edição Espaço de criação Figura 9 - Barra de Ferramentas e Espaço de criação do NVU Criando e Salvando páginas A tela inicial do programa é mostrada na Figura 9. Nela você encontra 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. 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 10 - Salvando sua página pela primeira vez Você então será solicitado a informar o Título de sua página (Figura 11), ou seja, o nome que aparece na parte superior de sua página quando apresentada no navegador.

9 Material didático Projeto Web Prof. Carlos 9 Figura 11 - Atribuindo um título a sua página web Por exemplo, se você denominar sua página como Minha primeira página e visualizála no navegador, verá esse texto como mostra a Figura 15. Figura 12 -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!). Figura 13 - Salvando sua primeira página Procure a pasta criada e salve o arquivo, digitando o nome do arquivo desejado. 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 dicas a seguir. 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!

10 Material didático Projeto Web Prof. Carlos 10 Abrindo 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 14), clique no menu Arquivo e, a seguir, na opção Abrir... Figura 14 - 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. Utilizando a Barra de Formatação A Barra de Formatação (Figura 15) é 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 15 - Barra de Menus Formatar Formatando o Texto (fonte, tamanho, estilo, 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 16. Figura 16 - Selecionando o texto

11 Material didático Projeto Web Prof. Carlos 11 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. 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 17. DICA 5: O mesmo efeito pode ser conseguido clicando diretamente nos botões da barra de menu - diminuir a fonte aumentar a fonte Figura 17 Alterando o tamanho do texto Figura 18. Para Formatar o Estilos do texto, selecione no menu a opção desejada, como na 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.

12 Material didático Projeto Web Prof. Carlos 12 Figura 18 - Alterando o estilo do texto Para modificar a cor do texto, clique no menu Formatar e selecione a opção Cor do texto... (Figura 19). Figura 19 - Alterando a cor do texto Abrirá a janela Cor do texto (Figura 20), onde então você escolherá a cor desejada. Ao concluir, clique em OK. Figura 20 - 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

13 Material didático Projeto Web Prof. Carlos 13 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) 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 21 - Escolhendo o alinhamento do texto Alterando Plano de fundo e cores

14 Material didático Projeto Web Prof. Carlos 14 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 22). 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 23). Depois de selecionada as cores clicar no botão OK. Figura 22 - Modificando o Plano de fundo e cores da sua página Clicar sobre a cor para alterá-la Escolher uma imagem para colocar de plano de fundo Figura 23 - Modificando o Plano de fundo e cores da sua página Alterando as propriedades da Página Para alterar as propriedades da Página clique no menu Formatar e selecione a opção Plano de fundo e cores...

15 Material didático Projeto Web Prof. Carlos 15 Figura 24 - Modificando as Propriedades da página Na janela Propriedades da página você pode alterar todas as informações que achar necessário e depois clicar em OK. Figura 25 - Modificando as Propriedades da página Inserindo Imagens As imagens devem ser salvas na mesma pasta que as páginas que foram criadas e isso precisa ser feito antes de incluí-las na mesma. Seguem algumas dicas para pesquisa de imagens na Internet: Cliparts e fotos (gratuitos) no site da Microsoft -

16 Material didático Projeto Web Prof. Carlos 16 Google ( é preciso tomar cuidado com o direito das imagens nem tudo que está na Internet pode ser usado livremente Para salvar uma imagem o processo é o seguinte: (1) Faça a pesquisa e escolha a imagem Figura 34 Página com imagens de uma pesquisa feita a partir da palavra farmácia (2) Clique sobre a imagem escolhida Figura 35 Figura escolhida (3) Clique sobre Ver Imagem em tamanho grande

17 Material didático Projeto Web Prof. Carlos 17 Figura 36 Salvando a Imagem no seu computador (4) Clique sobre a imagem com o botão direito do mouse e na janela que se abrirá escolha a opção Salvar Imagem Como. Localize a pasta criada e salve sua imagem clicando sobre o botão Salvar. Figura 37 Salvando a Imagem no seu computador

18 Material didático Projeto Web Prof. Carlos 18 OBS: 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) Buscar a imagem no seu computador (figura 38) Clicar para buscar o arquivo Texto substituto - permite aos leitores de tela que leiam para pessoas cegas o que significa a imagem. Figura 38 Buscando a imagem no seu computador Clique sobre a imagem que deseja inserir em sua página e depois no botão Abrir conforme mostrado na figura 39.

19 Material didático Projeto Web Prof. Carlos 19 Figura 39 Buscando a imagem no seu computador Deixe marcada a opção O endereço é relativo ao a página. Digite o texto substituto para a imagem ou marque a opção Não usar texto substituto O endereço relativo é referente apenas à localização da pasta e ao nome do arquivo. OBS: Se aparecer o caminho do seu computador no código este não funcionará quando for publicado. Figura 40 Incluindo uma imagem em sua página

20 Material didático Projeto Web Prof. Carlos 20 Cuidado: Se o endereço da imagem aparecer assim é porque a imagem não foi salva na mesma pasta que a página. Quando da publicação dos arquivos e da página haverá problema, pois o endereço apontará para a pasta Caso queira diminuir o tamanho da imagem é possível clicar nesta mesma janela de Propriedades da Imagem na Aba Dimensões 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 desconfigurada. Figura 41 Alterando o tamanho da imagem que será inclusa em sua página Se você não alterar nada e preferir é possível modificar o tamanho da imagem direto no espaço de criação e edição do NVU, conforme figuras 42 e 43. Selecionando a imagem e pelos seus cantos direito ou esquerdo inferior ou superior aumentando ou diminuindo-a.

21 Material didático Projeto Web Prof. Carlos 21 Figura 42 Alterando o tamanho da imagem direto na tela de edição de sua página Figura 43 Alterando o tamanho da imagem direto na tela de edição de sua página OBS: Isso não reduz o tamanho da imagem original nem o seu tamanho, apenas mostra a imagem no navegador no tamanho configurado. A sua imagem será reduzida como mostra a figura 44.

22 Material didático Projeto Web Prof. Carlos 22 Figura 44 Exibindo a imagem na tela de edição de sua página Para alterar as propriedades das imagens abrindo a janela Propriedades da imgem basta clicar sobre a imagem (selecionando-a) com o botão direito do mouse escolher a opção Propriedades para a Imagem (figura 45) Figura 45 Alterando as Propriedades para a imagem

23 Material didático Projeto Web Prof. Carlos 23 Abrirá a janela de Propriedades da imagem (figura 46) Espaçamento e alinhamento em relação ao texto. Altera o endereço da imagem, sua descrição e texto substituto. Altera as dimensões (largura e altura da imagem) Para colocar um link para um arquivo, página ou . Figura 46 Janela para alteração das Propriedades de uma imagem Para alterar a localização da imagem na página basta selecioná-la e usando os botões de formatação (direita, esquerda, centralizar e justificar). Inserindo 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 ou (2) Clique no botão Aparecerá a janela Inserir tabela É possível incluir uma tabela de forma rápida (figura 47) ou detalhada (figura 48), assim como especificar as propriedades das células (figura 49). Escolha o número de colunas e linhas. Se for na aba Rápido, selecione com o mouse pintando na cor azul forte o número de linhas e colunas que você deseja que sua tabela tenha.

24 Material didático Projeto Web Prof. Carlos 24 Tabela com 2 linhas e 2 colunas Figura 47 Inserindo tabela de forma rápida Através da aba Detalhado é possível além de escolher o número de Linhas e Colunas, escolher a Largura da tabela e a espessura da Borda. Caso a tabela seja apenas para organizar o conteúdo e você não quiser que as linhas e colunas apareçam coloque 0 no item Borda. Figura 48 Inserindo tabela de forma detalhada Através da aba Célula é 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.

25 Material didático Projeto Web Prof. Carlos 25 Figura 49 Escolhendo ou modificando as Células de uma tabela 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

26 Material didático Projeto Web Prof. Carlos 26 Figura 51 Modificando as propriedades da tabela e da célula Na aba Tabela você pode: Altera o número e tamanho em (porcentagem da janela ou pontos) das Linhas e Colunas. O tamanho da borda O espaçamento Mudar a cor do plano de fundo da tabela A formatação da tabela (Esquerdo, Centralizado ou Direito). 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.

27 Material didático Projeto Web Prof. Carlos 27 Figura 52 Modificando a cor do plano de fundo da tabela 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 52 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 53, selecionar na tabela (tabela, linha, coluna, célula ou todas as células) figura 54 e Excluir da tabela (tabela, linhas, colunas, células ou conteúdo da célula) figura 55.

28 Material didático Projeto Web Prof. Carlos 28 Figura 53 Inserindo na tabela (tabela, linha em cima ou embaixo, coluna e célula antes ou depois) Figura 54 Selecionando na tabela (tabela, linha, coluna, célula ou todas as células) Figura 55 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)

29 Material didático Projeto Web Prof. Carlos 29 Figura 56 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 57) Figura 57 Aumentando o tamanho da tabela Inserindo 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 58)

30 Material didático Projeto Web Prof. Carlos 30 Figura 58 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 e selecionar a opção O endereço é de Figura 59 Janela Propriedades do link 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

31 Material didático Projeto Web Prof. Carlos 31 Figura 60 Incluindo link para outro arquivo criado para compor o seu site Figura 61 Link criado para o arquivo (página) 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 62 Figura 62 Link para um endereço da Internet Para inserir link para um , digite o endereço e selecione a opção O endereço é de conforme figura 63

32 Material didático Projeto Web Prof. Carlos 32 Figura 63 Link para um endereço de Visualizações (Normal, Exibir Tags, Código-fonte e Visualizar) Na visualização Normal (figura 65) 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 66) O modo de Visualização (figura 67) 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 68) Figura 64 Modos de visualização das páginas

33 Material didático Projeto Web Prof. Carlos 33 Figura 65 Modo de visualização Normal das páginas Figura 66 Modo de visualização Código-fonte

34 Material didático Projeto Web Prof. Carlos 34 Figura 66 Modo de visualização Visualizar Figura 66 Modo de visualização Exibir Tags

35 Material didático Projeto Web Prof. Carlos 35 Copiando o código-fonte Planeje e faça sua página utilizando o NVU, depois que estiver pronta copie o códigofonte. Veja como fazer isso: (1) Planejar e fazer a sua página.