Criação de Páginas Web Em FrontPage

Transcrição

1 Criação de Páginas Web Em FrontPage

2 Ficha de trabalho N.º Criação e Gestão de um site Criação de um web site; O ambiente de trabalho do FrontPage; A barra de vistas; Gestão de páginas: criação; Gestão de páginas: abertura; Gestão de páginas: guardar; Gestão de páginas: impressão; Gestão de páginas: pré - visualização; Gestão de páginas: publicação. 1. No Microsoft FrontPage cria um web site pessoal, com o nome PáginaPessoal, O web site é constituído por pastas e ficheiros e deve ser guardado em A:\. 2. No menu ver, escolhe lista de pastas, para veres as pastas e os ficheiros que foram criados. Deverás ver uma figura como a que se mostra na figura 1. Portanto o web site é constituído pelas pastas _private, imagens e pelos ficheiros : favorite.htm, index.htm, interest.htm, myfav3.htm e photo.htm. A primeira página que visualizamos quando acedemos a um web site chama-se a home page e deverá ser guardada num ficheiro chamado index.html, index.htm, defalt.html ou default.htm. Repare que neste caso o ficheiro que contém a home page chama-se index.htm. 3. Cria uma nova página em branco. É assim criada uma nova página com o nome nova_pagina_1.htm. Guarda esta página na pasta PaginaPessoal com o nome página_adicional_1.htm. 4. Insira, agora, uma nova página mas baseada no modelo perguntas frequentes. Insira uma imagem qualquer nesta página que deve guardar com o nome FAQ.htm no mesmo web site. Guarde todas as páginas, tendo o cuidado de guardar a imagem mudando-lhe o nome para IMG na pasta imagens e escolher guardar ficheiro. 5. Abra o anterior web site, a pasta PaginaPessoal, e depois o ficheiro FAQ.htm. Proceda à impressão desta página: para tal no modo de edição e no menu ficheiro aceda a pré visualização, imprimindo de seguida esta página. 6. Para garantir a salvaguarda do nosso site vamos publicar o nosso web site mas, por agora, localmente, ou seja na pasta PaginaPessoal - teste do disco rígido. Acede a ficheiro publicar site web site remoto utilizar uma pasta no computador. Fichas de trabalho Página 2

3 Ficha de trabalho N.º Formatação de páginas Web Aplicar temas; Inserção de imagens; Inserção de imagens do Clipart; Criação de formulários; Aplicar frames. 1. Entre no Microsoft FrontPage e abra o site que obteve na ficha anterior. Abra depois o ficheiro FAQ. 2. Relativamente à página anterior, aplique-lhe o tema blank. Para isso usar o menu formatar e depois tema. Tenha o cuidado de aplicar o tema apenas à página FAQ e não às outras do nosso web site. O fundo da página deve ficar como se mostra na figura 1. ou seja uma grelha. 3. Insira uma nova página em branco. Insira uma imagem do Clipart e outra de ficheiro. Grave-a no mesmo web site com o nome pagina_adicional_2.htm, e tenha o cuidado de guardar as imagens na pasta imagens. 4. Insira um form simples na página pagina_adicional_2.htm ou então insira uma nova página mas agora escolha o modelo de página form page wizard. Siga o assistente para criar o formulário. 5. As imagens devem ficar no cimo da página, lado a lado, depois aparece, então o formulário pedido. 6. Vais agora usar frames. A vantagem destes, consiste no facto de numa mesma página poder-mos juntar, páginas numa determinada disposição consoante o tipo de frame escolhida. No menu ficheiro escolhe nova página depois secção frames pages e banner and contents. Falta agora indicar quais as páginas, inicial e outras a colocar. Na página superior vamos inserir o texto A minha página pessoal como se vê na figura 2. Fichas de trabalho Página 3

4 Figura 2 7. Formata o texto a teu gosto. 8. Na frame lateral esquerda vais definir a página inicial página_adicional_1.htm ou então caso queiras uma nova página. 9. Na frame lateral direita procede de modo semelhante definindo a página_adicional_2.htm ou nova página. Fichas de trabalho Página 4

5 Ficha de trabalho N.º Hiperligações Criar uma hiperligação; Criar uma hiperligação para uma página ou ficheiro; Criar uma hiperligação para uma página ou ficheiro da www; Criar uma hiperligação para um endereço de correio electrónico; Editar uma hiperligação; Eliminar uma hiperligação. As hiperligações são instruções de HTML que, à ordem de um clique do rato, indicam ao browser da web que deverá ser apresentada outra página ou ficheiro. 1. Abra o web site que obteve nas aulas anteriores. Depois escolha a página pagina_adicional_1.htm para criar uma hiperligação para a página photo.htm. 2. De seguida cria uma hiperligação para um ficheiro à tua escolha, por exemplo um ficheiro de imagem. 3. Cria uma hiperligação para a home page do IOL, que é a página de entrada do site (index.htm) do ISP IOL. Cria outra para a página Não é necessário escrever como endereço 4. Cria uma hiperligação para o seguinte endereço de correio electrónico: suporte@acesso.sapo.pt 5. Vais, agora, mudar esta hiperligação para apoioaocliente@iol.pt que é o endereço de correio electrónico para o apoio ao cliente do IOL. 6. Para terminar esta ficha de trabalho elimina a hiperligação anterior (neste caso para um endereço de correio electrónico). 7. Grava o teu trabalho na disquete ou pasta os meus documentos no disco rígido. Fichas de trabalho Página 5

6 Ficha de trabalho N.º Animação Inserir um som de fundo; Inserir um clip de vídeo; 1. Abra o web site com que trabalhou na ficha 3, depois abra a página pagina_adicional_1.htm. 2. Insira um som de fundo na página anterior. Procure um som para inserir faça uma procura no Windows para obter sons do tipo wav. Proceda da seguinte forma: procure por *.wav no nome do ficheiro a procurar para encontrar os ficheiros de som existentes no seu PC. 3. Na mesma página vais agora inserir um clip de vídeo. Para tal inserir ficheiro video. Se não encontrares nenhum vídeo faz uma procura no computador por ficheiros com extensão mpg. Fichas de trabalho Página 6

7 Ficha de trabalho N.º 5 - Uso de marquees; - Trabalho com imagens; - Hiperligações dentro da própria página; - Personalizar botões; - Frames; - Uso de marcadores. Exercício 1 Acede ao FrontPage e abre a página com o nome Jardim. Grava-a com o nome Jardim_Final. Efectua as seguintes alíneas: 1. Insere o título O Meu Jardim no início da página. Usa uma marquee em slide alinhado ao centro. Formata - o com o tipo de letra Comic Sans MS, de tamanho 7 e cor a teu gosto. 2. Formata o fundo da página com a imagem flor_azul. 3. Formata o texto com o tipo de letra Arial Black, de tamanho 5, cor azul-escuro e centrado na página. 4. Abre a página Flores e grava-a com o nome Flores_Final. 5. Insere as imagens rosa, tulipa, malmequer e girassol ao centro, nas respectivas células da 1.a coluna da tabela. Não deves alterar o tamanho das células da tabela. 6. Na 2.a coluna escreve o nome das flores correspondentes, com a mesma formatação da página Jardim_Final, e uma breve descrição de cada uma. 7. Efectua uma hiperligação do fundo da página para o topo. 8. Insere um botão para voltar à página anterior. 9. Na página Jardim_Final, efectua hiperligações nos nomes das flores para a página Flores_Final. 10. As hiperligações têm de ir directamente para a descrição da respectiva flor. Grava o teu trabalho. Fichas de trabalho Página 7

8 Exercício 2 Usa o FrontPage para efectuar um pequeno web site relacionado com a água. Deves ter em consideração as características abaixo representadas. Todos os ficheiros deverão ser gravados na pasta com os nomes indicados, na disquete ou eventualmente na pasta os meus documentos do disco rígido. 1. Página inicial Água1 Todas as páginas serão acedidas pela página Água1 (página inicial). Utiliza para isso as frames. Esta página de arranque deverá ter o seguinte aspecto: 1.1.Título: Água Bem precioso Figura Na área de menus insere as seguintes palavras que irão ser hiperligações e que são as seguintes: - Importância - Estudar - Links 1.3.Na área principal insere uma frase e uma imagem a teu gosto sobre o tema do site. 1.4.Na área principal insere uma marquee com comportamento, dimensão e cor a teu gosto, com o texto Visite esta página!!! 1.5.Formata os fundos das varias áreas a teu gosto. 1.6.Em cada uma das palavras efectua uma hiperligação para as páginas seguintes. 2. Página A importância da água 2.1.Título: A água e a vida. Usa o Wordart, centrado, com movimento de animação à tua escolha. 2.2.Na área principal escreve um texto que ilustre a tua opinião sobre a importância Fichas de trabalho Página 8

9 da água para a nossa sobrevivência e de que forma achas que a preservas. Formata o texto a teu gosto. 2.3.Fundo da área principal a azul claro. 2.4.Na área principal, insere: - Um gif animado sobre o tema: (Faz uma pesquisa, no motor google, por gifs animados) - Uma seta (gif animado) com um link para a página inicial. 3. Página Estudar a água 3.1.Título: Estudar a água. Formata o título e o fundo desta a teu gosto. 3.2.Formata o fundo da área principal com uma imagem à tua escolha usando marca de água. 3.3.Efectua uma pesquisa na Internet usando um motor de busca à tua escolha e recolhe informação sobre o consumo da água, a sua preservação e outros aspectos que aches interessantes e importantes. (Podes usar a chave de pesquisa: centro de ciência viva). Efectua um pequeno texto que ilustre as conclusões que retiraste e insere-o na área principal da página. 3.4.Formata o texto a teu gosto. 3.5.Insere uma seta (gif animado) com um link para a página inicial. 4. Página Hiperligações 4.1.Na zona inferior direita da área principal, escreve a palavra Sugestões. Insere a imagem caixa_postal de apoio e efectua uma hiperligação na frase para uma caixa postal criada com o objectivo de te poderem enviar sugestões sobre como preservar a qualidade da água. 4.2.Na zona inferior esquerda da área principal, insere uma imagem a teu gosto ou um botão personalizado, para hiperligação para a página inicial. 4.3.Na zona central da área principal, escreve frases com links para sites interessantes sobre o tema do teu site. Grava o teu trabalho Fichas de trabalho Página 9

10 Ficha de trabalho N.º Publicação Publicação das páginas num servidor web; Gestão e actualização do conteúdo de um website; Vais, agora, publicar o teu web site da ficha 5 num servidor na Internet. Esta operação só deve ser efectuada depois de editadas todas as páginas para verificação de eventuais erros ortográficos. Necessitamos de alojamento para o nosso site a ser desta forma publicado. A sapo, ISP (Internet Service Provider - Fornecedor de Serviço Internet) fornece alojamento de 15MB para alojamento, gratuito, de páginas pessoais dos seus clientes. Vamos publicar o site inicialmente numa pasta do disco rígido para ficarmos com uma cópia. Usa o menu ficheiro e depois publicar Utilizar uma pasta no computador ou rede como web site remoto. A página de entrada, ou ficheiro principal deverá chamar-se, obrigatoriamente, index.html pois caso isto não aconteça, os seus ficheiros podem estar devidamente alojados na sua área, mas não poderão ser acedidos directamente assim que alguém digitar o seu endereço. 1. Acede ao web browser Internet explorer e depois ao site que é o endereço da home page do SAPO. 2. Aí vamos criar um registo e fornecer o endereço do nosso site para posteriormente ser acedido via internet. Um NetBI (bilhete de identidade da internet) sem qualquer acesso do SAPO, dá-lhe direito a 5 endereços, cada um com 15Mb, num total de 75Mb distribuídos pelos 5 domínios. Cria o seguinte registo: - Nome: - Morada: - Endereço do site: - Etc. 3. Acede à página Coloca o respectivo nome de utilizador e palavra passe para passares à zona de edição das páginas pessoais. 4. Se ainda não definiste o teu endereço cria o endereço do teu site. Uma vez reservado o seu espaço e criado o seu endereço web (xxxxxxxx.no.sapo.pt) pode usar uma de três formas para enviar os seus conteúdos : Envio de ficheiros via web. Não precisa de nenhum programa, basta que vá até à sua área de edição, e clique na opção "webexplorer" no menú da esquerda. Na parte de baixo da página tem disponível a opção "Envio/Upload via Web". Pode enviar até 5 ficheiros em simultâneo, procurando-os no seu disco, e depois de Fichas de trabalho Página 10

11 devidamente seleccionados, clicar em "enviar". 5. Podes ainda colocar um contador de visitas para saberes o número de visitas ao teu site. 6. Transfere os ficheiros e pastas da tua pasta que contém o web site para o servidor web da sapo. 7. No final o teu web site está publicado na web e pode agora ser acedido por qualquer pessoa que aceda à internet em qualquer parte do mundo. 8. Verifica isso acedendo ao site via Internet escrevendo na barra de endereços o endereço do site. Neste caso o endereço será: 9. O upload, transferência de ficheiros do nosso computador para o servidor, foi feito via web mas também poderia ter sido feito usando um programa de FTP ( File Transfer Protocol), como por exemplo o CUTE FTP ou o FTP commander Como é que faço para promover o meu site? Há várias formas de promoção do seu site. A primeira e mais eficaz é ter a sua página alojada no SAPO, o site português mais visitado. Invista num site com conteúdos de qualidade, e mantenha-se atento às notícias da página principal, aí serão divulgados concursos e formas de ter a sua página destacada no SAPO. Fale do seu site aos seus amigos, familiares, colegas, etc. Inscreva o seu site em concursos, mais uma vez, esta forma de promoção só será eficaz se o seu site tiver, realmente, qualidade. Submeta o seu site aos motores de pesquisa mais populares. Inclua links no seu site, para sites interessantes e de qualidade e cujos temas sejam complementares do seu. Se enviar um mail aos autores das páginas para as quais fizer links, informando-os desse facto, será muito natural que eles retribuam. Mais uma vez a qualidade dos seus conteúdos é fundamental. Atenção, não são permitidos no SAPO banners ou qualquer tipo de publicidade, nem mesmo a que advém de programas de trocas de links. NUNCA faça spam (envio massivo de mensagens para destinatários que não a solicitaram, independentemente do eventual interesse que a sua página possa ter) a anunciar a inauguração do seu site. Não use o mail, nem os newsgroups, nem os chats, nem os foruns. A não ser que se tratem de conteúdos muito específicos, nesse caso, deverá anunciá-lo discreta, única e exclusivamente nos canais que sejam frequentados apenas pelos interessados nessas matérias. Fichas de trabalho Página 11