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

Mdulo II

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

HTML
Apesar do programa FrontPage criar todo cdigo HTML para voc, bom saber um pouco sobre HTML. O FrontPage traz trs Guias de trabalho

Normal Onde voc digita o texto, inclui figuras, componentes, tabelas sem se preocupar com os cdigos.

HTML Que exibe os cdigos criados pelo FrontPage para que sua pgina seja exibida sem falhas

Visualizao Como o nome j diz, exibe o resultado de seu trabalho (pgina).

Mas voltamos a falar sobre HTML Veja o cdigo criado pelo FrontPage <p>Pgina local</p> <p><a href="pagina1.htm">pagina1.htm</a>&nbsp;</p> <p>Home Page</p> <p><a href="http:/www.uol.com.br/">http://www.uol.com.br /</a></p> No caso acima foi criado um Hyperlink para a pgina1.htm. <p> determina que todo texto digitado entre as tags<p></p> ficar em um nico pargrafo e um espao de uma linha dividir este pargrafo do prximo Podemos modificar o cdigo HTML para que o texto tenha uma seqncia. Usamos<font face= arial size=2>para definir qual fonte ser usada.
2

Digitamos o Hyperlink<a href= pgina1.htm > Modificamos o nome pgina1.htm para Primeira pgina ou Voltar, retornar algo parecido e fechamos o Hyperlink com a tag </a>. Se o texto seguir em outra linha digitamos <br> No esquecendo de fechar a tag </font> caso o texto seguinte utilize outro tipo e tamanho de fonte. Veja o cdigo completo <font face= arial size=2> <a href= pgina1.htm >Voltar</a><br> </font>

Criando Frames no Front Page

Frames so as divises de pginas dentro de uma mesma tela (Por exemplo, sites que utilizam Menu esquerda ou direita, onde o menu funciona como uma pgina, e o site como outra.)

Abra o FrontPage 2000 File > Open Web Arquivo > Abrir Web e abra o Site que esteja trabalhando File > New Page > Frame Page Arquivo > Nova Pgina > Pgina de Quadros Selecione : Hierarchical Hierarquia aninhada Ser exibido um frame com duas colunas , sendo que a segunda coluna dividida em duas linhas

Selecione esta pgina e clique em OK. Clique na coluna da esquerda Caso a pgina que ser exibida na coluna da esquerda j estiver feita clique em Set Initial Page (Definir Pgina Inicial) selecione a pgina fazer o mesmo com a coluna da direita Caso a pgina que ser exibida na coluna da esquerda no estiver feita clique em New Page (Nova Pgina) e digite indice na coluna da direita na parte superior digite logo ( de logotipo ) na coluna da direita na parte inferior digite intro ( de introduo ) Clique no rodap Frame Page HTML HTML de Pgina de Quadro Entre o comando <title > .... </title> digite o ttulo da pgina , neste exemplo : Empresa Y
4

Clique no cone do disquete para salvar Observe que ser exibido que as duas colunas do frame contornadas com uma linha azul Selecione onde ser salvo sua pgina Clique Save (Salvar) Observe que ser exibido que a coluna da esquerda contornada com uma linha azul No item : File Name (Nome do Arquivo) o FrontPage colocou : indice.htm Clique Save (Salvar) Observe que ser exibido que a coluna da direita na parte superior contornada com uma linha azul No item : File Name (Nome do Arquivo )o FrontPage colocou : logo.htm Clique Save (Salvar) Observe que ser exibido que a coluna da direita na parte inferior contornada com uma linha azul No item : File Name Nome do Arquivo o FrontPage colocou : intro.htm Clique Save (Salvar) Clique no rodap NORMAL Clique na coluna da esquerda com o boto direito do mouse Frame Properties (Propriedades do Quadro) Name (Nome): digite indice Initial Page (Pgina Inicial) observe que j est indice.htm Resizable in Browser (Redimensionvel no Navegador) deixa esta opo

desmarcada para que o usurio no tenha a opo de redimensionar os frames no browser Show ScrollBars (Mostrar Barras de Rolagem) never always nunca comando "no" comando "yes"

sempre

if needed

se preciso

comando "auto" nunca

neste exemplo selecione never Clique no disquete para salvar

Clique na coluna da direita superior com o boto direito do mouse Frame Properties (Propriedades do Quadro) Name (Nome): digite logo Initial Page (Pgina Inicial) observe que j est logo.htm Resizable in Browser (Redimensionvel no Navegador) deixa esta opo

desmarcada para que o usurio no tenha a opo de redimensionar os frames no browser Show ScrollBars (Mostrar Barras de Rolagem) never always nunca comando "no" comando "yes" comando "auto" nunca

sempre

if needed

se preciso

neste exemplo selecione never Clique no disquete para salvar

Clique na coluna da direita inferior com o boto direito do mouse Frame Properties (Propriedades do Quadro) Name (Nome): digite intro Initial Page (Pgina Inicial): observe que j est intro.htm Resizable in Browser (Redimensionvel no Navegador) deixa esta opo

desmarcada para que o usurio no tenha a opo de redimensionar os frames no browser Show ScrollBars Mostrar Barras de Rolagem never always nunca comando "no" comando "yes" comando "auto" se preciso

sempre

if needed

se preciso

neste exemplo selecione if needed

clique em Frame Page (Pgina de Frames) Desmarque Show Border ( Exibir Borda ) para que seu frame seja sem bordas Clique no disquete para salvar Clique no rodap : Frame Page HTML HTML de Pgina de Quadro O mesmo nome do frame ter que ser o nome do target ( destino ) e da pgina no target do frame indice digite : indice no target do frame logo digite : logo acrescente o comando target no frame intro e digite : intro * quando fizer frames no FrontPage 2000 sempre inserir o comando target no ltimo frame , pois uma maneira automtica de inserir na prpria pgina que ir rodar o comando <base target="intro"> * observe que a pgina que ir rodar ser : intro.htm ; logo o alvo para os links ser target="intro"

<html> <head> <title>Empresa Y</title></head> <frameset cols="150,*" framespacing="0" border="0" frameborder="0"> <frame name="indice" scrolling="no" noresize target="indice" src="indice.htm"> <frameset rows="20%,*"> <frame name="logo" target="logo" src="logo.htm" scrolling="no" noresize> <frame name="intro" target="intro" src="intro.htm" scrolling="auto" noresize> </frameset> <noframes> <body> <p>Esta pgina usa quadros mas seu navegador no aceita quadros.</p> </body> </noframes>

</frameset> </html>

Voc j tem seu Frame pronto, caso queira mexer nele, apenas altere o contedo das pginas que voc escreveu ndice e intro .

Inserindo um Tema no Front Page

Um tema um visual padro j criado que voc poder utilizar como base para a construo do seu site. Siga os passos: Formatar > Tema Aplicar Tema Para Todos Arquivos Pgina Selecionada Selecione o tema que queira usar Clique OK

Inserindo Data e Hora automticas

Podemos inserir a data e hora da ltima modificao da pgina. Esses dados so atualizados automaticamente pelo Front Page, ou seja, assim que voc modifica algo na pgina, ele atualiza a data e hora da modificao. Para isso, basta ir no menu Inserir -> Data e Hora

Introduo ao Cold Fusion

No abordaremos o Cold Fusion durante este curso, por ser uma linguagem muito complexa, que necessitaria de um curso exclusivo apenas para explicla. No entanto, deixamos a introduo disponvel para que voc possa ter uma idia bsica do que o Cold Fusion Cold Fusion uma ferramenta de desenvolvimento de aplicaes Internet e que voc pode criar uma larga variedade de aplicaes de pginas dinmicas para comrcio, comunicao, sites interativos e intranets. Cold Fusion possui uma linguagem de marcao que roda no servidor e retorna cdigo dinmico html, dependendo da ao definida. Essas pginas executadas no servidor com extenso cfm ou cfml , tm os comandos normais html acrescentados de tags do cold fusion que sero processados pelo servidor, mas que no so enviados para o cliente.

Criar um formulrio usando um assistente

Voc pode criar um formulrio usando o Assistente de pgina de formulrio, que pede que voc especifique as seguintes informaes: Os dados que deseja coletar, que determinam quais campos devem ser colocados no formulrio. A maneira como deseja formatar os campos. Voc pode organizar o formulrio em pargrafos ou listas e escolher se deseja usar tabelas para formatar a pgina. Se deseja incluir um ndice analtico na parte superior da pgina, o que til em formulrios grandes. Como deseja salvar os resultados do formulrio (os dados coletados no formulrio, aps um visitante do site preench-lo). O assistente permite
9

salvar os resultados em um arquivo de texto ou em um arquivo HTML (Hypertext Markup Language, linguagem de marcao de hipertexto), ou voc pode usar seu prprio script personalizado para lidar com os resultados. Quando um visitante do site clicar no formulrio, os resultados do formulrio sero enviados ao local especificado. Usando estas informaes, o assistente cria seu formulrio. Voc pode personaliz-lo editando o texto e definindo propriedades e regras de entrada de dados para os campos de formulrio. 1. No menu Arquivo, aponte para Novo e, em seguida, clique em Pgina. 2. Na guia Geral, clique em Assistente de pgina de formulrio e, em seguida, clique em OK. O Assistente de pgina de formulrio aberto. Siga as instrues na tela para completar o formulrio Mais informaes sobre formulrio voc encontra no assistente do FrontPage.

Mas muito comum voc clicar em Submeter e nada acontecer, neste caso utilize um formulrio com parmetros do prprio servidor que hospeda sua pgina. Um bom exemplo o formulrio da OptionLine www.option-line.com que envia todos os dados para sua conta de e-mail OptionLine. Alm disso voc pode lanar mo dos Guestbook (livro de visita).

10

Publicando seu site

At agora voc aprendeu a criar seu site, daqui em diante, voc aprender como public-lo na internet. O site que voc montou at agora precisa ser publicado na Internet. No momento, ele est presente somente no seu computador. Para publicar seu site, voc antes precisa se cadastrar em um provedor de Hospedagem. Fazendo uma pesquisa no Google (www.google.com.br) por Hospedagem Gratuita , voc deve encontrar diversos deles. Um dos mais conhecidos o hpG (www.hpg.com.br) Aps fazer o cadastro, voc ter um login e uma senha. Tambm ter um endereo de qual ser seu site, como por exemplo www.seunome.provedor.com.br Agora, h duas maneiras de voc enviar o contedo do seu computador para a internet A PRIMEIRA: Ento voc encontrar na rea para membros desses sites, algo como Gerenciador de arquivos , nele, voc enviar os arquivos do seu computador para o provedor de hospedagem. Depois de enviar todos os arquivos que faro parte do seu site (incluindo as imagens), renomeie a pgina que voc deseje que aparea inicialmente para index.html . Assim, sempre que voc acessar o endereo dado pelo provedor, voc encontrar seu site no ar. Esse endereo deve ser repassado a todos que voc deseje que acessem o seu site. A SEGUNDA: A Segunda, um pouco mais complicada, no entanto mais eficiente. Voc dever ter um programa de FTP, nossa sugesto o Cute FTP ou Ws_Ftp Programas de FTP so especializados em enviar o contedo do seu computador para a internet.
11

Tanto no Cute FTP como no Ws_Ftp, voc dever clicar em algo como Add site ou Create Site . Ento adicione as informaes sobre seu site, o programa pedir o usurio, a senha, o nome que voc deseja para seu site, e o endereo de FTP (pode aparecer como host name ou IP Adress). O endereo de FTP dever ser informado pelo provedor de hospedagem, mas normalmente FTP.XXX.COM.BR onde XXX o endereo do provedor. Por exemplo, o endereo de FTP da HPG : ftp.hpg.com.br

Abaixo, uma foto do WS_FTP

12

13

Depois de digitar as informaes corretas sobre seu site, clique em Connect, ento voc ser levado a uma tela parecida com a de baixo:

14

A tela da ESQUERDA so os arquivos do seu computador, j a da DIREITA a do seu site na Internet, ou seja, os arquivos que se encontrarem na direita so os do seu site. Para transferir um arquivo do seu computador para a Internet, basta clicar nele duas vezes (rapidamente), o mesmo acontece para transferir da internet ao seu computador. Lembre-se que o arquivo inicial dever chamar-se index.html

15

Divulgando seu site

Ter um site sempre muito legal, mas mais legal ainda quando ele bem freqentado. Um site com contedo bom e uma divulgao razovel pode atingir uma mdia de 3000 pessoas visitando diariamente. Mas isso no fcil, primeiramente, o contedo do site tem que ser atraente. Depois, voc precisa divulgar seu site, pois sem que os outros saibam que ele existe ele no ter acesso algum.

Buscadores
Para divulgar seu site, os principais mtodos so os Buscadores. Voc pode entrar neles e cadastrar seu site (alguns voc no encontrar lugar para cadastrar, pois a prpria equipe do buscador fica varrendo a internet procurando sites). Quando cadastrar seu site, ele estar disponvel e pronto para ser encontrado quando algum precise de algo que ele tenha.
www.quem.com.br www.cade.com.br www.radaruol.com.br www.surf.com.br www.yahoo.com.br www.altavista.com www.lycos.com www.yahoo.com www.webcrawler.com www.excite.com www.infoseek.com

16

E-mails sem SPAM

Um timo jeito para divulgar seu site por e-mails, porm, se o e-mail enviado sem a autorizao de quem recebe pode ser considerado SPAM. Portanto, nossa sugesto que voc coloque em seu site um espao para as pessoas que desejem receber atualizaes dele se cadastrem, assim, sempre que tiver algo novo voc envia um e-mail avisando-as.

Outros Mtodos
Existem dezenas de mtodos para seu site ser conhecido, a vo alguns deles: O boca-a-boca: avise seus amigos e amigas, pea que eles visitem o site e divulguem para os amigos deles. Entre em um concurso de sites: ao receber alguns votos, voc se encontrar na lista do concurso (ranking), ento os visitantes podem se interessar e entrarem nele. Divulgue em bate-papos: entre em salas de bate-papo e fale sobre seu site aos presentes.

17

Como ganhar dinheiro com seu site

Quando seu site j tiver um bom nmero de usurios dirios, voc ver pessoas e/ou empresas lhe perguntando quanto voc cobra para que anunciem no seu site. Normalmente, os anncios funcionam na forma de banner, ou seja, a empresa que estiver anunciando coloca um banner no seu site (banner uma figura animada ou no, que faz propaganda de quem anuncia) e ao clicar no banner o visitante redirecionado ao site da empresa. O preo que voc deve cobrar pelo anncio em banner depende de voc e de quantos acessos voc recebe, no entanto, gira em torno de 30/40 reais por ms por anunciante se voc ainda no tiver muitos acessos. O Cursos 24 Horas tem um sistema onde voc anuncia os cursos no seu site e recebe comisso por cada curso vendido. uma forma interessante de transformar os acessos do seu site em dinheiro. Veja em www.cursos24horas.com.br/parcerias

18

Projeto de Web Sites

Perguntas a responder antes de iniciar o projeto do site
1. Quais so os principais objetivos do seu site? (Informar? Vender? Dar suporte?) 2. Quem o seu pblico-alvo primrio e secundrio? (descreva interesses, necessidades, habilidades) 3. Qual a capacidade dos usurios? (browser, velocidade de acesso) 4. O site atrair diferentes pessoas? Quais? Quais so as suas reas de interesse? 5. Qual o principal slogan do site? (a mensagem que melhor descreve seu contedo) 6. O contedo do site novo ou j existe em outro formato? 7. Que imagens j existentes esto disponveis? 8. necessrio obter dados dos clientes? O qu preciso saber? Porqu? 9. Que novas tecnologias sero utilizadas? Quais e, especificamente, porqu? 10.Que informao do site mudar? Com que freqncia e com que abrangncia? 11.O site funcionar durante quanto tempo? 12.Descreva o produto como se fosse uma pessoa. (srio? estranho? jovem? confivel?) 13.Que reas do site precisam de atualizao? Quem se beneficia com esta atualizao? 14.Quando o site precisa estar pronto?

19

Dicas e consideraes finais

Esperamos que voc tenha conseguido realmente aprender a fazer um site. Nossas dicas finais so para que voc se dedique, se quiser um site realmente famoso e bem visitado, deixe-o bonito e com contedo, assim, os visitantes vo adorar e entrar nele sempre. Uma outra dica, um site que tem muita coisa para webmasters, a Wmonline (www.wmonline.com.br) . Nele voc encontrar formulrios, contador de visitas, guestbook, enquete, cadastro de e-mails para os visitantes (como j citamos anteriormente) e outras coisas disponveis para voc utilizar no seu site.

20