CURSO MÍDIAS NA EDUCAÇÃO Módulo Informática/Internet

Transcrição

1 CURSO MÍDIAS NA EDUCAÇÃO Módulo Informática/Internet Orientações: Como construir um tutorial utilizando o modelo htm: Figura 11. Padrão de Tutorial. Nosso objetivo é construir, através de um modelo pré-estabelecido, um tutorial de nossa autoria, mantendo a estrutura original, porém modificando apenas o conteúdo do mesmo.

2 Figura 12. Formato de organização dos arquivos de um tutorial Conhecendo o modelo html O modelo em html do tutorial é composto de uma pasta com diversos arquivos: - arquivos swf: animações em flash - arquivos gif: figura dos botões utilizados no tutorial - menu.js: corresponde ao menu flutuante e responde pela função de aumentar ou diminuir a fonte do texto utilizado no tutorial - arquivos htm: onde estarão armazenados os conteúdos do tutorial Arquivos htm A nossa intenção é fazer um tutorial com várias páginas que podem ser acessadas através de um menu flutuante. Cada página corresponde a um arquivo htm, começando por index.htm (a página inicial) e depois por ordem numérica crescente, p_02 (página 2), p_03, p_04, etc... Para editá-los você pode abrir o bloco de notas ou qualquer outro editor de html. Escrevendo o título da página do tutorial Vamos começar pelo título da nossa página. Para tal devemos considerar dois lugares: na barra de título do navegador e na página que será visualizada em si (o título de fonte de cor branca sobre um fundo verde) Figura 13. Barra de Título do navegador.

3 Figura 14. Barra de Título da página. Para inserir um título na barra do navegador, escreva-o entre as tags <TITLE>, que se encontram na quinta linha do código em html. Figura 15. Modelo de como escrever o título da barra do navegador. Para mudar o título da página, modifique o texto que se encontra entre as tags <span> na linha 59 e 60 Figura 16. Modelo de como escrever o título da página. Escrevendo o conteúdo da página do tutorial Observe que na linha 65 começa a tag <FONT>, no qual devemos inserir o conteúdo do nosso tutorial. Aconselha-se dividir o texto em pequenos parágrafos, utilizando a tag <P>, para tornar a leitura mais dinâmica, porém tome cuidado de só fechar a tag <FONT> quando chegar ao final do texto dessa página. Tal procedimento é necessário para que, ao clicar no botão aumentar/diminuir, todo o texto aumentará/diminuirá por completo, e não apenas uma parte dele, que será o que ocorrerá caso o fechamento da tag <FONT> seja inserido antes. Podemos também inserir figuras no tutorial para facilitar o entendimento do leitor. utilizando a sintaxe: <P><img src="paint.jpg" width="260" height="43"></p> Onde substituímos a palavra paint pelo nome correspondente do nosso arquivo de imagem, sem esquecer de colocar seus atributos width (largura) e height (altura) apropriados.

4 Figura 17. Modelo de como escrever um texto e inserir figura no modelo html. Salvando a página htm Quando estiver tudo pronto, salve o arquivo em extensão htm. Aqui você pode escolher o nome do arquivo ou pode deixar o nome do modelo, porém, como veremos mais adiante, teremos que colocar o mesmo nome do arquivo apontado pelo link do menu flutuante em menu.js. Figura 18. Modelo de como salvar o arquivo no modo html.

5 Editando o menu flutuante Após construir todas as páginas necessárias do nosso tuturial, vamos editar o menu que dará acesso a todas elas. Ao abrir o arquivo menu.js num editor de texto, podemos observar que nas primeiras linhas encontra-se as funções, em javascript, de aumentar e reduzir a fonte do nosso tutorial. Não precisamos modificar nada aqui. Mais adiante, nas últimas linhas, começando pela linha 137, encontraremos a seguinte estrutura: ssmitems[0]=["página Index", "index.htm", "Conteudo"] ssmitems[1]=["conteúdo 2", "p_02.htm", "Conteudo"] ssmitems[2]=["conteúdo 3", "p_03.htm", "Conteudo"] ssmitems[3]=["conteúdo 4", "p_04.htm", "Conteudo"] ssmitems[4]=["conteúdo 5", "p_05.htm", "Conteudo"] ssmitems[5]=["conteúdo 6", "p_06.htm", "Conteudo"] ssmitems[6]=["conteúdo 7", "p_07.htm", "Conteudo"] ssmitems[7]=["conteúdo 8", "p_08.htm", "Conteudo"] ssmitems[8]=["créditos", "p_09.htm", "Conteudo"] Percebemos que o menu trata-se de um vetor de links. O vetor foi nomeado ssmitems, e cada elemento contém, após o sinal de colchetes, o nome da página na primeira aspas, e o nome do arquivo htm que está sendo apontado, na segunda aspas. A terceira aspas, que estão escritas a palavra Conteudo não nos é interessante no momento e não deve ser modificada. O nome da página corresponde ao texto que irá aparecer no menu de links, que deve ser clicado para que o usuário acesse aquela página do tutorial Obs: caso o nome de página não caiba no menu numa única linha, pode-se aumentar a largura do menu na linha 114: menuwidth=200; // Must be a multiple of 10! no quotes!! Um novo valor deve ser inserido no lugar de duzentos, caso esse não apresente uma largura suficiente para abrigar o nosso nome da página em uma única linha. O novo número inserido deve ser múltiplo de dez. Mesmo com essa possibilidade de escolher a largura do menu, procure não colocar nomes muito longos. Após definir o nome da página, devemos agora apontar para o nome do arquivo htm correspondente. Simplesmente coloca-se o mesmo nome do arquivo equivalente à página do tutorial que você editou anteriormente. Como trata-se de um vetor de links, podemos colocar mais links no nosso menu flutuante copiando a mesma estrutura apresentado na definição dos elementos mudando apenas o índice do nosso vetor, respeitando a ordem crescente. Exemplo 1: menu com onze links (acrescentou-se duas linhas) ssmitems[0]=["página Index", "index.htm", "Conteudo"] ssmitems[1]=["conteúdo 2", "p_02.htm", "Conteudo"] ssmitems[2]=["conteúdo 3", "p_03.htm", "Conteudo"]

6 ssmitems[3]=["conteúdo 4", "p_04.htm", "Conteudo"] ssmitems[4]=["conteúdo 5", "p_05.htm", "Conteudo"] ssmitems[5]=["conteúdo 6", "p_06.htm", "Conteudo"] ssmitems[6]=["conteúdo 7", "p_07.htm", "Conteudo"] ssmitems[7]=["conteúdo 8", "p_08.htm", "Conteudo"] ssmitems[8]=[" Conteúdo 9", "p_09.htm", "Conteudo"] ssmitems[9]=[" Conteúdo 10", "p_09.htm", "Conteudo"] ssmitems[10]=["créditos", "p_09.htm", "Conteudo"] Figura 19. Modelo de como modificar o conteúdo do menu. Por outro lado, se for trabalhar com menos do que nove páginas, apagam-se no código, os elementos excedentes. Exemplo 2: menu com apenas 5 links (exclui-se as quatro últimas linhas) ssmitems[0]=["página Index", "index.htm", "Conteudo"] ssmitems[1]=["conteúdo 2", "p_02.htm", "Conteudo"] ssmitems[2]=["conteúdo 3", "p_03.htm", "Conteudo"] ssmitems[3]=["conteúdo 4", "p_04.htm", "Conteudo"] ssmitems[4]=["créditos", "p_05.htm", "Conteudo"]