A p r e n d a a Fa z e r u m Si t e

Mdulo I

Parabns por adquirir um curso dos Cursos 24 Horas. Voc est investindo no seu futuro! Ns esperamos que o curso traga os melhores resultados possveis. Atenciosamente Equipe Cursos 24 Horas

Introduo
O que WWW?
A definio oficial descreve o World-Wide Web como uma "iniciativa de busca de informao hipermdia a longa distncia visando dar acesso a um vasto universo de documentos". O que o projeto World Wide Web (WWW, W3) fez foi permitir que usurios em redes de computadores com um mtodo de acesso compatvel pudessem acessar inmeras mdias de maneira simples. Usando uma interface chamada Mosaic, o projeto Web mudou a maneira das pessoas verem e criarem informao - foi criada ento a primeira rede hipermdia global.

COMO FOI CRIADA A WEB? A histria da Web comeou em Maro de 1989, quando Tim Berners-Lee do CERN (uma organizao Europia de pesquisadores de Fsica em altas-energias) props que o projeto fosse usado como um meio de transportar efetivamente pesquisa e idias atravs da organizao. A comunicao a esse nvel era um objetivo do CERN h muitos anos, uma vez que os seus membros localizam-se em diversos pases.

COMO FUNCIONA A WEB? A Web funciona segundo o popular modelo cliente-servidor. Um servidor Web um programa cujo nico propsito servir documentos para os clientes quando requerido. Um cliente Web um programa que faz a interface com o usurio e realiza pedidos de documentos a um servidor especificado pelo usurio. A carga causada pelo servidor normalmente pequena, uma vez que no realiza nenhum processamento pesado e s opera quando um documento pedido pelo cliente. Aqui est um exemplo de como o processo funciona:

1. Atravs de um cliente Web (tambm chamado de browser), o usurio seleciona uma parte do hipertexto ligada a outro documento - "The History of Computers". 2. O cliente Web conecta-se a um computador especificado por um endereo em algum lugar da Internet e pede ao servidor Web desse computador pelo documento "The History of Computers". 3. O servidor responde enviando o texto e qualquer outro elemento de mdia existente no documento (figuras, sons, ou filmes) para a tela do usurio.

DICAS PARA CRIAR UM BOM SITE Criar um site muito simples graas s facilidades que o FrontPage oferece. Porm, um site bem elaborado exige pacincia, dedicao e conhecimentos de algumas tcnicas. Procure lembrar sempre que um bom site, alm de ter uma aparncia atraente, necessita que a mensagem seja transmitida de forma sucinta e sem demora no aparecimento das informaes na tela. Fique atento s seguintes dicas: Defina os seus objetivos de forma clara; Analise o perfil de quem ir visitar seu site; Utilize itens que possam ser exibidos rapidamente na tela; Crie um bom layout de forma a torn-lo bastante atraente; Evite excesso de informaes numa nica pgina; A cada dia verificamos que a informao uma ferramenta de extrema necessidade em qualquer negcio. Sabendo disto, diversas empresas investem em tecnologias que possibilitam a transmisso de tais informaes. Um dos meios de transmisso mais divulgado na mdia de forma geral a Internet, e esta produziu tendncias como Intranet. Atravs destas redes de computadores, funcionrios, empresas, instituies, profissionais liberais, e qualquer tipo de pessoa, podem divulgar seus trabalhos, e venderem suas idias praticamente

para qualquer parte do planeta. Geralmente estas informaes so apresentadas em formas de pginas gravadas em um determinado site (local virtual).

O Microsoft FrontPage 2000 considerado um dos melhores programas na criao de Web sites, e se voc pensa que precisar dominar alguma linguagem de programao para obter sites com aparncia profissional, ficar surpreso em saber que o FrontPage capaz de executar automaticamente praticamente todas as tarefas de programao. Para prosseguir no curso, voc dever adquirir o programa FrontPage 2000 ou XP, outras verses tambm servem (FrontPage 97, 98 ou express), porm elas podem no ter todas as funcionalidades aqui demonstradas. O Front Page 2000 parte integrante do Microsoft Office 2000. O Microsoft Office XP tambm contm uma verso (Front Page 2002) que pode ser utilizada. Verifique se voc j no tem o Office 2000 ou XP na sua mquina, pois neste caso a probabilidade grande de que o Front Page j esteja instalado.

A Evoluo da Web
A Web evoluiu muito nos ltimos anos, podemos classificar os sites como de 1, 2, ou 3 gerao. Os requisitos para ser classificado como um site de terceira gerao esto mais relacionados ao design do que propriamente tecnologia... A primeira gerao Os primeiros sites na Web privilegiavam apenas o contedo e no a forma. Foram criados por cientistas que desejavam compartilhar suas idias com outros cientistas. Eles eram estritamente lineares e tinham um mnimo de funcionalidade. Na primeira gerao, nota-se claramente a limitao imposta por modems lentos e monitores monocromticos. Os grficos e textos eram apresentados sempre de cima para baixo e da esquerda para a direita. Era muito comum o uso de saltos de linhas, marcadores e linhas horizontais como recursos para separar pargrafos. A segunda gerao No incio de 1995, foram lanadas diversas extenses linguagem HTML no browser Netscape Navigator (que ento dominava sozinho a web). A evoluo nos sites surgiu na forma de cones, imagens de fundo, botes com bordas, tabelas e grficos mapeados. A estrutura deixa de ser linear para ser apresentada de forma hierrquica, quase sempre atravs de menus com vrios nveis. A maior diferena da segunda gerao para a primeira foi a substituio de palavras por elementos grficos. As funes passam a ser representadas por cones, surgem imagens de fundo ao invs dos antigos fundos cinzas, os grficos coloridos e animados
5

substituem as antigas figuras. Cria-se o conceito de "home-page": uma pgina cheia de desenhos 3D, janelas e botes, que serve de menu para acessar o restante de um site. Nesta poca, a legibilidade deixou de ser importante. Para ter um bom site, era necessrio mostrar uma grande quantidade de truques tcnicos. Sites de terceira gerao O que diferencia a terceira gerao das demais no so os recursos tecnolgicos. A grande diferena est no design. A idia dar aos usurios uma boa sensao. As pessoas mais habilidosas conseguiram criar sites de terceira gerao usando qualquer browser grfico. Na terceira gerao, o contedo volta ao seu lugar de destaque. Entretanto, a forma no mais deixada de lado. H uma preocupao simultnea com funcionalidade e beleza esttica. H grande preocupao no layout preciso, na harmonia entre as cores, na escolha do tipo de letra adequado, no uso correto dos grficos e no tempo para carregar cada pgina. Acima de tudo, h um compromisso de ser agradvel (em todos os sentidos) ao usurio. Os projetistas destes novos sites utilizam metforas e modelos psicolgicos dos consumidores. Assim como os arquitetos que fazem os shopping centers, eles passam horas e at dias pensando em como tornar suas pginas mais atraentes aos seus usurios. Criar sites de terceira gerao um trabalho rduo, que exige dedicao e uma grande sentimento daquilo que agrada o seu pblico-alvo. Em geral envolve o trabalho de uma equipe que precisa

trabalhar unida para fazer cada pgina ser bonita e o site como um todo funcionar como uma boa experincia para o usurio. O Restaurante interessante a comparao de um site web com um restaurante. Voc descobre um restaurante atravs de um amigo, de um anncio ou passando por acaso por ele. Voc l cartazes ou faixas com ofertas do lado de fora, pra na entrada e sente o clima e o cheirinho da comida. Estando na porta, voc decide se vai ou no entrar. Em um restaurante popular, voc at pode esperar em uma fila para conseguir uma mesa. Se voc ficar, ser levado a uma mesa e l lhe mostraro um cardpio. Voc faz a sua escolha. Quando a comida chega, voc aprecia o prato. Tanto a comida como a sua arrumao no prato so obras do chef. Voc prova um ou outro item, mistura alguns para experimentar o sabor. No final, voc escolhe uma sobremesa, pede a conta e paga. Voc deixa uma gorjeta e pode at conversar um pouco com o maitre ou o dono. Depois, quando sentir fome novamente, poder voltar ou no, Estando na porta, voc decide se vai ou no entrar. Em um restaurante popular, voc at pode esperar em uma fila para conseguir uma mesa. Se voc ficar, ser levado a uma mesa e l lhe mostraro um cardpio. Voc faz a sua escolha. Quando a comida chega, voc aprecia o prato. Tanto a comida como a sua arrumao no prato so obra do chef. Voc prova um ou outro item, mistura alguns para experimentar o sabor. No final, voc escolhe uma sobremesa, pede a conta e paga. Voc deixa uma gorjeta e pode at conversar um pouco com o maitre ou o dono. Depois, quando sentir fome novamente, poder voltar ou no,
7

de acordo com a qualidade da sua primeira experincia de acordo com a qualidade da sua primeira experincia

Pense na Web como uma cidadezinha aconchegante com alguns milhes de restaurantes.

Iniciando o MS - FrontPage 2000

Para iniciar o MS - FrontPage 2000 clique em Iniciar/ Programas/ Microsoft Front Page

Definio de alguns termos usados em home pages

Web page Pginas so os documentos bsicos da internet e so escritas em HTML (hypertext markup language). Frame (Quadro ou moldura): So modelos de pginas HTML que dividem a

janela do browser em reas definidas chamadas frames (molduras). Cada um dos frames pode exibir uma pgina diferente. Clicando em um hyperlink pgina, a nova pgina usualmente exibida em outro frame (moldura). Hyperlink uma conexo de uma pgina com outro local, seja uma nova em uma

pgina ou uma localizao diferente na mesma pgina. O hyperlink pode ser uma palavra, frase, uma imagem, um arquivo, um programa ou um endereo de e-mail Navigation bar (barra de navegao): um conjunto de hyperlinks usados

para navegao em um endereo. As barras de navegao podem ter hyperlinks para outros endereos (sites) ou para uma pgina principal dentro de um mesmo site. A barra de navegao pode ser formada por um conjunto de imagens identificadas com textos ou apenas por textos.

10

Viso Geral do Front Page

Formas de Visualizao
Quando o FrontPage aberto, a opo de trabalho no modo normal, onde possvel editar todo o contedo da pgina que est sendo criada. Existem outros modos entre eles esto o modo HTML, para ver a pgina em cdigo html; e o modo Preview Visualizao, usado para ver como a pgina funciona em

um browser (navegador).

11

Formatar pginas
Sempre que iniciado, o FrontPage abre um novo trabalho ( nova_pgina_1.htm) . Comece formatando esta pgina Clique em Arquivo/ Propriedades Em propriedades voc pode formatar o ttulo da pgina (Guia - Geral), cor de fundo (Guia - Plano de fundo), cores dos hyperlinks ativo, visitado, cor do texto, margens superiores e inferior. Caso queira inserir uma figura de fundo marque Figura de plano de fundo Clique em Procurar selecione uma figura nos formatos Gif ou Jpg Clique em Ok e veja os resultados

12

Inserir texto
A Colocao do Texto em uma Home Page parte fundamental em um Bom Site. O Texto deve ser simples e explicativo, um bom Site aquele que tem um texto leve e objetivo, a colocao de um fundo ajuda a embelezar a Pgina. Alguns destaques com cores e marcadores, e uma boa diagramao ajudar na aparncia e compreenso. O Front Page dispe de um completo Editor de Texto, com formatao de fontes, pargrafos, alinhamentos, marcadores, recuos, verificao ortogrfica, etc, se voc sabe utilizar o Word, no ter problemas.

Para inserir um texto em sua pgina voc no precisa digitar nenhuma linha de cdigo. Ex: <FONT FACE= ARIAL COLOR= BLUE SIZE=2> O programa cria os cdigos necessrios na formatao de fonte, cor, tamanho de sua escolha. Digite o texto, selecione-o e clique em Negrito, Itlico ou Sublinhado

Clique em

Estilo e Fonte

Veja o cdigo de sua pgina na Guia Html. Veja a pgina j pronta na Guia Visualizao.

13

Para salvar esta pgina clique em Arquivo/ Salvar ou clique em Salvar D um nome para a pgina se no quiser manter o mesmo nome. Escolha a pasta onde tambm deve estar todas as figuras utilizadas na pgina, exemplo figura de fundo e clique em Salvar Feche esta pgina.

Vamos ver agora como abrir esta mesma pgina. Clique em Arquivo/ Abrir Procure pela pasta onde foi salvo sua pgina.htm e clique em Abrir aps encontrala. Outra forma de abrir uma pgina clicando em: Abrir Encontrar a pgina e clicar em Abrir

14

Hyperlinks
Para criar um hyperlink para uma outra pgina necessrio que esta pgina exista. Ento clique em Arquivo/ Novo voc pode escolher um formato Ex: Pgina normal, Assistente de pgina de formulrio ou at mesmo pgina de pesquisa entre outras. Mas selecione Pgina normal e clique em OK . O FrontPage 2000 cria uma nova pgina em branco. Salve esta pgina Vamos linkar esta pgina para a outra pgina j criada de nome pagina1.htm Voc inserir um Hyperlink para outra pgina de vrias maneiras 1 clicando em Inserir/ Hyperlink Procurando a pgina armazenada que foi salva no FrontPage Selecione a pgina e clique em OK . 2 ou simplesmente pressionando as teclas Ctrl + K Selecione a pgina e clique em OK . 3 outra forma clicando em: Hyperlink

15

Selecionando a pgina e clique em OK . Hyperlink para Pgina local pgina.htm Cdigo HTML <A HREF= pagina.htm >Pgina</A>

Web site http://www.cursos24horas.com.br Cdigo HTML <A HREF= http://www.cursos24horas.com.br > Apostilas</A> Como pode notar, sempre que o Hyperlink for para uma pgina externa sua, ele obrigatoriamente dever conter http://

16

Quando voc quiser que abra uma janela para enviar um e-mail sempre que o visitante clicar em determinado link, ele dever ser precedido por mailto: E-mail mailto:cursosite@cursos24horas.com.br Cdigo HTML <A HREF= mailto:cursosite@cursos24horas.com.br >E-mail do curso</A>

Salve a pgina e faa os teste necessrio clicando nos Hyperlinks criados.

17

Numerao/ Marcadores
Para usar numerao selecione todo texto desejado e clique em numerao

O texto ficar como no exemplo abaixo Exemplo de numerao

1. Apostila Linux 2. Apostila Novell 3. Apostila Unix 4. Apostila Windows

Para retirar a numerao selecione o texto desejado e clique novamente em numerao

Para incluir marcaes no texto basta selecionar o texto desejado e clicar em marcadores O texto ficar como no exemplo abaixo Exemplo de marcadores Linux Novell Unix Windows XP Uma outra alternativa para trabalhar com Marcadores utilizando o menu Formatar -> Marcadores e Numerao, conforme a figura abaixo:
18

Nesta janela voc pode selecionar com mais opes os estilos de Marcadores que voc deseja utilizar.

Figuras
Voc j aprendeu a incluir figuras de fundo na pgina, mas vamos aprender incluir figuras de Cliparts ou uma imagem que voc queira colocar em sua pgina. Para inserir uma figura de Cliparts clique em Inserir/ Figuras/ Cliparts

19

Selecione um Cliparts adequado e clique em Inserir clipe.

Para inserir uma figura de outras pastas clique em Inserir/Figuras/ Do Arquivo

20

Basta selecionar a imagem desejada e clicar em OK .

Lembrando que aps sua pgina estar pronta voc deve enviar junto com ela todas figuras utilizadas na pgina (veremos no segundo mdulo como fazer isso). Voc pode editar as propriedades da sua imagem, em:

21

Tabelas
As vezes entramos em uma pgina feita completamente por tabelas, mas essas tabelas no necessariamente aparecem. A formatao da pgina feita por tabelas. Isso no impede de criamos tabelas de preos, de produtos, artigos em geral. Fundindo clulas em novas tabelas e criando um visual interessante.

Para criar uma tabela clique em Inserir tabela Arraste (selecionando) at os quadros que deseja que faam parte da tabela

J com a tabela na pgina selecione algumas clulas para formatao, clique com o boto direito do mouse. Clique em propriedades da clula para formatar cor de fundo, borda tamanho e cor, alinhamento vertical e horizontal, etc. O texto das clulas voc formata usando Negrito, Itlico, Sublinhado, Cor da fonte, Centralizado, etc.

22

Como exerccio, tente fazer algo parecido com o exemplo acima com tabelas.

Mesclar clulas
Selecione os quadros clicando e arrastando sobre eles, clique com o boto direito do mouse, clique em Mesclar clulas para fundir uma clula com outra. No caso de Mesclar clulas sempre bom formatar a borda da tabela para zero.

Componentes
Os componentes aqui listados s funcionam no navegador da Microsoft (Internet Explorer). Usaremos como exemplo trs componentes Office Spreadsheeet, Contador de acesso, letreiro digital e Boto em foco. Para inserir esses e outros componentes clique em Inserir/ Componentes/nome do componente ou clique em Componentes

23

Office Spreadsheet
Capaz de somar, subtrair, multiplicar, dividir da mesma maneira que o Excel. Trata-se de clulas do Excel que usamos formulas simples ou complexas Ex: C1=B1-A1 O resultado aparece na clula C1 aps pressionar a tecla enter.

Contador de acesso
Como o nome j diz faz uma contagem de visitantes em sua pgina Use um dos vrios modelos Marque Redefinir contador para: 1 O contador s executado no servidor com sua pgina pronta e recebendo visitas na internet.

24

Letreiro digital
S funciona com o Navegador Internet Explorer Digite o texto desejado no espao para Texto Marque a opo que mas lhe agrada em Direo, Velocidade, Comportamento, Cor de fundo, etc.

Ateno: No Netscape ser exibido apenas um texto fixo sem efeito.

Boto em foco
Este sim trs um efeito bem interessante que executado tanto no Internet Explorer como no Netscape Digite o Texto do boto que ser visualizado por todos visitantes da pgina Em Vincular a: clique em Procurar... escolha a pgina que deseja que este boto ao ser clicado abra. Selecione uma Cor do boto, Cor do plano de fundo do, Efeito, cor de efeito e clique em OK . Clique em Salvar Para salvar sua pgina. Neste caso foi criado applet que devem ser enviados junto com sua pgina nome fphover.class nome fphoverx.class

Voc pode incluir outros efeitos Experimente outros componentes.

25