Curso de Formação e Soluções Web

Casa e Cia Frontpage – 1
TODOS OS DIREITOS RESERVADOS. Proibido a reprodução total ou parcial, por qualquer meio ou processo, gráfico, reprográfico,
vídeo gráfico. Vedada a memorização e/ou a recuperação total ou parcial em qualquer sistema de qualquer parte dessa obra. A
violação é punível como crime conforme Lei nº 5.988 de 14/12/73, Lei dos Direitos Autorais.
Curso de formação em desenvolvedor de soluções web para internet
Com Suporte
Software produzido por Microsoft
Visa formar profissionais autônomos, aptos a atuarem na elaboração, composição, edição e

designer de soluções web, versáteis, atuais e interativas para a internet. O Programa é Previsto para 25
horas aulas no mínimo além de serviços, extraclasse na confecção de uma home pages de exercício.
Abrangência na solução web, em formulários com diversas formas de envio; animações em Applet
Java e em flash; reformulação de: formulários e scripts ASP, PHP Java Scripts; salas de Chat; livro de
visitas; Murais com interação em bancos de dados. Tudo sempre acompanhado de informações gerais
relativas ao mercado de trabalho, tendências de desenvolvimento na rede e melhoria de desiginer e
aplicabilidade.
Por S i d n e i R e z e n d e

Casa e Cia www.casaecia.arq.br - Rua dos Sabias, 453 CJ. Apolo / Afonso Pena São José dos Pinhais – Paraná BR
Cep: 83045- 610 Email: casaeciatecnica@terra.com.br fsarquitetura@casaecia.arq.br
*Conceituação de Html.
*Os diferentes editores de Html.
*As diferenças de linguagens.
*Conceitos de Java, Xml Dhtml, Java script.
*Bancos de Dados e Formulários.
*O projeto como inicio de tudo.
*Glossário.
*Conhecendo o programa Microsoft FrontPage 2000 (português).
*Barra de ferramentas do FrontPage.
*Configurações básicas do FrontPage.
*O que é um Frame e Página-branca.
*Conhecendo os arquivos do FrontPage.
*As diferentes formas de visualizações do FrontPage.
*Utilizando os modelos padrões do FrontPage, (vantagens e desvantagens).
*Conhecendo as ferramentas para a edição de imagem e textos do FrontPage.
*O que é um editor de imagens e suas vantagens.
*Alguns editores de imagens, textos e programas para suporte ao FrontPage.
*Digitando textos, inserindo imagens e componentes no FrontPage.
*Imagens:
*O comando inserir imagem:
*Plano de fundo (Background) com imagens:
*Cuidados com o seu Plano de fundo:
*Imagens entrelaçadas:
*Exibindo a barra de ferramentas de Imagem:
*Inserindo Figuras:
*Criando uma imagem mapeada (Área interativa):
*Criando um texto sobre a imagem
*Criando um texto sobre a imagem:
*Exibindo uma parte de uma figura:
*Transformando uma figura colorida em preto e branco:
*Alterando o Brilho e o Contraste:
*Criando um efeito "botão" em uma imagem:
*Alterando o tamanho da imagem:
*Criando e configurando uma tabela, propriedades dentro do FrontPage e na web.
*Definindo e trabalhando com o hyperlink (externos e internos).
*Criar um indicador:
*Salvando e arquivando uma página criada no FrontPage.
*Os comandos avançados do FrontPage (sliders, banners, permuta de figuras).
*Criando um Botão:
*Opções Avançadas do Botão em foco:
* Adicionando botões em frame:
*Letreiros digitais:
*Efeito de HTML dinâmico:
*Formulários:
*Criando um Formulário:
*Caixa de texto de uma linha:
*Inserindo texto no formulário:
*Inserindo mais um campo no formulário:
*Inserindo uma Caixa de texto ou seleção:
*Inserindo uma caixa de seleção:
* Inserindo um Caixa de texto de rolagem:
*Trabalhando com os botões no formulário:
*Enviando os dados do formulário:

*Criar uma página de confirmação e atribuí-la a um formulário:
*Retornando informações ao visitante a partir de um campo de formulário:
*Busca interna no site:
*Editando os resultados da pesquisa:
*Tutorial básico para animação GIF no flash 5 BR.
*Publicar sua Web:
*Antes de publicar sua Web:
* Alguns serviços a serem oferecidos por um provedor:
*Publicando / Transferindo arquivos com Microsoft FrontPage 2000:
*Como as extensões de servidor afetam a publicação:
*Escolhendo os arquivos a serem publicados:
*Gerenciando os arquivos no servidor Web:
*Enviando páginas para o servidor usando FTP.
*Instalando o WS_FTP.
*Transferindo Arquivos com o WS_FTP.
*Como divulgar seu Site em equipamentos de buscas (Meta tags sim ou não?).
*Cadastrando a sua URL em 20.000 sites de busca ou apenas 20?
*Muito cuidado com a descrição do seu site:
*Configurando Meta Tags da sua página para os motores de busca:
*Criando Meta Tags com o FrontPage:
*Entenda como os mecanismos de busca fazem o "rankeamento" das páginas.
*Escolha as palavras-chave mais adequadas.
*Usando as palavras-chave dentro do conteúdo da página.
*Número de palavras-chave dentro do conteúdo da página.
*Melhore a sua popularidade em links
*Dicas do mecanismo de busca Yahoo!
*Dicas do Google.
*Dicas do Inktomi
*Dicas do FAST Search (AllTheWeb. com).
*Dicas do MSN Search.
*Outras considerações.
*Links interessantes:
*Pense um pouco.
*Alguns erros do webdesigner são imperdoáveis.
*Curiosidades:
*A internet e sua história.
*World Wide Web W W W:
*Urls & Links :Uniform Resource Locator U R L:
*Histórico Java
*Características da Linguagem:
Conceituação de Html.
Podemos dizer que HTML é o tijolo com o qual se constrói todas as páginas da internet ou que é o
pilar mestre da Web. Documentos em HTML ou Hiper Text Markup Language são arquivos de
computador que contenham os textos no padrão ASCII (formato somente texto). Um arquivo em HTML é
denominado documento ou página. Um conjunto de informações, sobre um determinado assunto, editado,
em páginas e armazenado em um computador é denominado Site. As páginas, contendo textos, editadas
em HTML possuem caracteres especiais, chamados de tags. Essas tags (caracteres) são os elementos,
não visíveis na página do navegador (browser), que configuram (posicionam / delimitam / localizam) e
Formatam (especificam a forma, o tamanho e o espaçamento) os textos nas páginas de um site. Não é
nossa intenção instruir os alunos para que editem textos em HTML porém, como veremos mais à frente, é
uma boa coisa quando reconhecemos, nos textos de scripts HTML, alguns comandos (ordens/ rotinas).
Vejamos agora como o conjunto funciona examinando alguns comandos básicos de HTML.
No início da página vem as tags que vão possibilitar a interpretação do padrão de linguagem usado e logo
depois o titulo da página “<title>” qualquer”</title>” e assim sucessivamente.
Para iniciar um código de ação é usado um “< comando>” assim, com os sinais “< e >” simplesmente
fechados sem qualquer símbolo especial , quer dizer que é o inicio do código e para terminar é usamos o
“</ comando>”, o sinal de “/” após do “<” indica que trata-se do final de um código. O sinal “>” indica o fim
do nome do comando. Para se iniciar uma página em HTML é necessário fazer o seguinte: digite no inicio
<html> depois: todo o conteúdo de seu site e no final </html>.

Obs: Você pode usar o seu bloco de notas(NotPad) para editar em HTML. Assim como aprender um novo
idioma, basta que saibamos qual o conjunto de letras (palavras em um novo idioma) que devemos utilizar
para que obtemos a comunicação; no nosso caso o importante é a visualização da pagina.
Veja o exemplo de uma página:

<!—Aqui começa
<html>
<title>Nome do site</title>
<p align=”center”><b><font size=”10”>Centralizado na pagina página
</font></b><p> o seu texto irá aparecer aqui </p>
<b>tudo aqui ficará em negrito</b>
<u>tudo aqui ficara sublinhado</u>
<i>tudo aqui ficará em itálico</i>
<center> aqui tudo ficara centralizado em sua página</center>
<a href=”http://endereço do site”>Texto com um direcionamento qualquer </a>
</html>
<!—Aqui termina
É interessante dizer que o texto (qualquer) descrito entre as tags “<” e “>” são lidos pelo
programa, mas se não for uma descrição conhecida, ou um comando válido ele abandona e prossegue
permitindo que seja possível inserir descrições sobre os comandos; como vimos no início e no final o
exemplo anterior com as descrições (<!—Aqui começa ou <!—Aqui termina).
Uma estrutura de HTML é dividida da seguinte maneira:

< HTML >  Início
< HEAD >
< TITLE > ............ < /TITLE >  Cabeçalho de Título
< /HEAD >
< BODY >  Corpo do HTML ( Conteúdo )
< /BODY >
< /HTML >  Fim
Formatação de Fontes
< FONT > com suas opções – Determina a fonte
< FACE > - Muda o tipo da fonte
< COLOR > - Muda a cor da fonte
< SIZE > - Muda o tamanho da fonte
> para relacionar os três capítulos anteriores:
Inserir Listas
< OL > Rótulos de listas ordenadas
< UL > Rótulos de listas não-ordenadas
< LI > Que define o conteúdo da lista para as duas opções.
Criação de Links
< A HREF=”nome do arquivo htm </A”>
Criação de Tabelas
< TABLE > Com opções como:
< BORDER > - Define uma borda na tabela
< WIDTH > - Define o tamanho da tabela
< TR > Permita a criação de novas linhas na tabela
< TD > Define o conteúdo da tabela
< ALIGN > Alinha o conteúdo de uma célula na tabela
< COLSPAN > Mescla colunas
< ROWSPAN > Mescla Linhas
Divisão da tela em frames :

< FRAMESET > com opções como:
< COLS > Divide a tela em colunas
< ROWS > Divide a tela em linhas
< SRC > Define o nome do arquivo HTML
< NAME > Dá um nome para o Frame ( apelido ).

Formatação.
Os principais comandos de estilo de texto são:
Comando---------Sintaxe------------------Função
Negrito------------"B"-----------------Aplica o estilo negrito
Itálico------------"i"-----------------Aplica o estilo itálico
Sublinhado---------"U"-----------------Aplica um sublinhado(não funciona em alguns browsers)
Strong------------"Strong"-------------Similar ao negrito
Typerwriter---------"TT"---------------Deixa o texto com espaçamento regular
Big-----------------"BIG"--------------Aumenta a fonte e aplica negrito
Small--------------"SMALL"-------------Reduz e altera a fonte
Sobrescrito---------"Sup"--------------Eleva o texto e diminui seu corpo
Subscrito-----------"SUB"--------------Rebaixa o texto e diminui seu corpo
Pulsante-----------"BLINK"-------------Faz o texto piscar(não funciona em alguns browsers)
Color: ----------Este parâmetro especifica a cor do texto ou fundo ou etc.
Seu valor pode ser especificado em hexadecimal, RGB ou por meio de um nome predefinido, como
mostramos abaixo. O FrontPage permite a graduação da intensidade da cor em uso, porém saiba que a cor
apresentada no quadro de cor do windows, quando alterada, pode não ser visualizada exatamente como
você vê no seu programa. A cor exposta no browser do seu cliente; da pessoa do outro lado do seu
provedor, da pessoa que visualiza sua pagina... A visualização do Matiz do brilho e da intensidade da cor
vai depender única e exclusivamente da configuração do monitor nas propriedades de Vídeo.
Cor - Aqua- Código - #70db93 Cor - Blue - Código - #0000ff

Cor - Black- Código - #000000 Cor - Cyan - Código - #00ffff
Cor - Fuchsia - Código - #ff00ff Cor - Gray - Código - #c0c0c0
Cor - Green - Código - #00ff00 Cor - Lime - Código - #32cd32
Cor - Brown - Código - #800000 Cor - Navy - Código - #23238e
Cor - Olive - Código - #808000 Cor - Red - Código - #ff0000
Cor - Silver - Código - #e6e8fa Cor - Teal - Código - #008080
Cor - White - Código - #ffffff Cor - Yellow - Código - #ffff00
*Os códigos e os comandos podem ser representados em letras maiúscula ou minúscula.
Como é podemos ver; editar um Site em HTML seria muito desgastante; solicitaria atenção e
dedicação de nível para que tudo estivesse de acordo, ainda mais quando se tem o conhecimento de que
qualquer pequena alteração, em alguma dessas tags poderá fazer com que boa parte do serviço não seja
visualizado em um browser (programa de navegação). A utilização de editores HTML, só vem facilitar e
proporcionar ganhos de tempo na criação de paginas webs.
Poderíamos fazer aqui uma lista, quase que infinita, de editores HTM disponíveis no mercado, no
entanto, vamos citar alguns dos mais conhecidos softwares (programas), com conceituado nível de
aplicabilidade e uso pela comunidade web. Como qualquer bom produto a venda no mercado, a qualidade
varia de acordo com a destinação e a necessidade de cada usuário final. Com essa afirmação tentamos
esclarecer, a todos, que cada produto possui uma abrangência e um volume de limitações que, por sua vez,
definem seu custo projetado para à utilização por um público alvo com características próprias. Não
existindo dessa forma condições de se afirmar qual seria o melhor programa entre os tantos existentes; na
verdade o mais conveniente as suas necessidades, com custo mais accessível, torna-se, com facilidade o
mais atraente.
Diferentes editores de HTML:

Dreamwever - Muitos são os recursos agregados a esse programa nas diversas edições de sua evolução
que o torna um dos mais complexos. Este programa possui um grande número de usuários devido a sua
idade, sua compatibilidade com outros programas que dão suporte a suas limitações (sem versão em
português até o ano 2001).
HotMetal Pro – Considerado, também um bom programa composto por inúmeros recursos. Possui uma
interface de leitura muito pratica e rápida (sem versão em português).
AceHtml – Pequeno e prático possui, muitas das ferramentas essenciais dos grandes programas (sem
versão em português).
Bragasoft Visual HTML – Também é pequeno, com o mínimo necessário para confecção de uma página.
Possui os tutoriais em português.
Existem diferenças visíveis entre os programas, acima, citados; porém o programa que vamos
utilizar possui uma característica fundamental que difere da maioria desses programas, específicos, para

edição em HTML. A facilidade de ser um editor de totalmente traduzido para o Português e a garantia de
um programa distribuído pela Microsoft é que faz do FrontPage, o editor mais usado no Brasil.
Sendo um dos mais completos softwares do ramo; possuidor de uma trabalhabilidade impar,
totalmente voltado para a complexidade do nosso idioma; o FrontPage, vai ser, com certeza, a melhor
ferramenta para sua futura tarefa, participando com 95% de todo o seu serviço, deixando 5% por conta dos
incrementos de funções especiais e segurança.
O FrontPage não edita somente os códigos html; possui ferramentas que configuram e editam em
DHTML, em Java, e Java script e ASP, além de criar conexões alguns bancos de dados e produzir
formulários complexos. Porém essas ferramentas devem ser usadas com certas reservas. Durante o curso
iremos deixar bem claro quais seriam as penalidades por algumas pequenas limitações do programa. A
principio basta saber que as limitações baseiam-se simplesmente na megalomania egocentrista do nosso
amigo Bil Gate.
As diferentes linguagens:
Não vamos definir, uma a uma quais as diferenças existentes entre as diversas linguagens, pois
isso seria desnecessário ao aprendizado, trazendo uma bagagem de informações confusas para ser
absorvida em pouco tempo e pouco acrescentaria ao momento. Podemos apenas esclarecer, em que se
baseia a existência de tantas linguagens diferentes para a mesma transmissão de dados via internet.
Como já vimos anteriormente a linguagem HTML é principalmente voltada para transmissão de
dados descritivos (textos). Ela possui marcações padronizadas limitando-se a troca de informações. Assim
sendo essa linguagem não dá suporte a interatividade, a troca automática de informações entre os
computadores, propiciando dessa forma, a criação de outras linguagens, que venham a suprir as falhas
existentes, as lacuna causada na evolução interminável da internet. A novíssima linguagem XML, que é
muito mais voltada a objetos, considerada uma evolução do HTML, parte basicamente deste principio que é
permitir maior velocidade na transmissão de dados além de possibilitar essa interabilidade entre diversos
computadores. Mas é preciso tomar cuidado com as novidades. Essas “novidades” podem não ser
visualizadas nos browsers antigos. A ASP (Active Server Pages - Página de Servidor Ativa) É um ambiente
para programação por scripts no servidor, que você pode usar para criar páginas dinâmicas, interativas e de
alta performance.
Os scripts rodam no servidor e não no cliente. É o próprio servidor que transforma os scripts em HTML
padrão (código fonte fica preservado), fazendo com que qualquer browser do mercado seja capaz de
acessar um site que usa ASP.
Para utilizar ASP em suas homepages, você precisa atender aos requisitos acima. Uma situação ideal é
utilizar o Microsoft FrontPage 2000 ou o Microsoft Visual InterDev (parte do Microsoft Visual Studio) para
editar as páginas, mas isso não é necessário. Você pode chegar lá apenas usando o Notepad.
Antes de qualquer coisa:
Uma outra linguagem que esta muito em pauta é o PHP que significa: Hypertext Preprocessor.
Realmente, o produto foi originalmente chamado de “Personal Home Page Tools”; mas como se expandiu
em escopo, um nome novo e mais apropriado foi escolhido por votação da comunidade. Você pode utilizar
qualquer extensão que desejar para designar um arquivo PHP, mas os recomendados foram.php , .phtml.
O PHP está atualmente na versão 4, chamado de PHP4 ou, simplesmente de PHP.
PHP é uma linguagem de criação de scripts embutida em HTML no servidor. Os produtos
patenteados nesse nicho do mercado são as Active Server Pages da Microsoft, o Cold fusion da Allayers e
as Java Server Pages da Sun. O FrontPage não dá suporte para visualização de paginas em PHP mas,
veremos algo mas sobre essa linguagem em Curiosidades ou consulte o Site
http://www.php.net/manual/pt_BR/ para ter uma panorâmica completa. No momento podemos dar uma
panorâmica dessas três linguagens. Da mesma forma que vimos, com o HTML, todas as outras seguem o
mesmo padrão, ou seja, existe um cabeçário que define a linguagem, a descrição de página, o conteúdo
visualizado e um fechamento; então compare.
uma estrutura de HTML. Uma estrutura de PHP Uma estrutura de ASP

< html >  início < html >  início <html>
< head > < head > < head >
< title > ......< /title >  título < title > ......< /title >  título < title > ......< /title >  título
< /head > < /head >
< /head >
< body >  <body>
< body <% commandos %>
html conteúdo / php /asp
/script/xml <? php “commandos!”; ?> <%=comandos%>
< /body > <? comandos ?> </body>
< /html >  fim < /body >< /html > fim </html> fim

Como podemos observar a base da transmissão de dados na rede é o tradicional HTML. Pode – se
dizer que alguns arranjos foram criados para que houvessem ganhos reais na velocidade, na segurança e
principalmente na interatividade na transmissão de dados pela rede mundial.
Conceitos de Java, Xml e Java script:

Java – O Java é ao mesmo tempo um ambiente e uma linguagem e de programação, produzido pela Sun
Microsystems, Inc. Trata-se de mais um representante da nova geração de linguagens orientadas a objetos
e foi projetado para resolver os problemas da área de programação cliente e servidor. Desde o seu início
em 1992, surgiram muitas outras aplicações para o Java. O Java tem a capacidade de criar “programas”
auxiliares, que podem ser usados para montar documentos HTML particularmente interessantes; veja mais
detalhes no final da apostila, em curiosidades.
DHTML – É um aperfeiçoamento da Microsoft para o HTML versão 4.0 que permite criar efeitos especiais,
como textos que se desprendem da página, uma palavra de cada vez ou o efeito de giro da transição do
estilo de mensagem entre páginas. Entretanto, alguns navegadores da web não oferecem suporte à
DHTML, de modo que as páginas que contem DHTML podem não ser exibidas adequadamente ou podem
ser definidas, por alguns browsers como Erros na exibição do site.
Xml – Criada em 1996, a linguagem vem sido citada na possibilidade de ser a evolução do
HTML. As perspectivas com essa linguagem são tão grandes, que empresas como Microsoft, Sum e IBM
estão investindo pesado no desenvolvimento da mesma. Vamos esperar que logo possamos visualizar em
qualquer browser. Curiosidade: Parte das páginas webs do Word, versão 2000 já são editadas em XML
Javascript – Há muito tempo já era conhecido o padrão de linguagem script. O próprio Visual Basic, assim
como o Java, possui a sua derivação. Da mesma forma que a Folha de Estilo (VB), o Javascript, foi
desenvolvido para dar maior diagramação, dinamismo e versatilidade a navegação.
Podemos dizer que é como uma seqüência de tags, com começo e fim, que determinam uma função
específica, acionada pelo cliente, dentro da página, proporcionado uma certa interatividade entre o visitante
e a sua página HTML.
Bancos de Dados e formulários:

Apesar de serem conteúdos completamente diferentes; pode-se dizer que são “aplicativos” com
finalidades muito próximas. Ambos, formulários e Banco de dados, são criados para interagir entre
computadores; receber e prestar informação às pessoas que naveguem por suas páginas. Um Banco de
Dados (que é um aplicativo especifico para executar algumas ações), pode conter vários formulários (que
são simplesmente scripts). Os scripts, que podem ter a complexidade de várias linguagens para efetuar
algumas ações, podem interagir tal qual um banco de dados, porém a grande diferença entre o Banco de
Dados e o Formulário está na capacidade facultada ao Banco de Dados de trocar, guardar, gerenciar e
transmitir as informações trocadas na rede.
O projeto como inicio de tudo:
1 Considerações
O que nós vemos influencia o que sentimos e facilita o entendimento das informações. A
informação visual é uma comunicação de modo não verbal, mas tem um impacto muito forte. É fato; que a
comunicação visual pode influenciar o emocional de uma pessoa e até motiva-la a sertãs atitudes. O
projeto visual de uma página na Web deve ser simples de ser interpretado, porém deve ser cativante a fim
de atrair o visitante à navegar por entre as páginas. Pelo fato empregar efetivamente a comunicação visual
a estética é uma parte que deve ser levado muito a sério. Ela é ferramenta mais importante para efetivar
comunicação e manter a atenção do visitante, o resto vai ser definido por conta do conteúdo do seu site.
A forma que você vai organizar as informações nas páginas pode fazer a diferença entre comunicar
uma mensagem ou deixar o usuário perplexo ou ainda desestimulado. Até mesmo a funcionalidade da
página pode ser afetada, se ela não tiver uma apresentação bem projetada. Um bom layout depende do
contexto em que está inserido e cumpre uma proposta maior, que, simplesmente, o aspecto decorativo, pois
todos os elementos visuais influenciam uns aos outros.
O primeiro passo para se montar um bom projeto para um site específico é visualiza-lo como um
negócio. Um bom negócio: é aquele proporciona; de forma simples e organizada; que um determinado
produto, interessante á uma fatia do mercado, com condições para custear aquisição do mesmo, possa dar
condições concretizar essa negociação e assim produzir lucros. O início passa pela a criação de um Plano
de Marketing que definirá a forma na qual será exposto o seu negócio ao mercado, ao seu futuro cliente, ao
seu publico alvo. O próximo passo é efetuar um Planejamento Técnico avaliando os recursos técnicos a
serem utilizados para movimentar o seu negócio. È natural, que nessa fase seja feio o uso de Consultores
Técnicos para dar a luz quanto as ferramentas disponíveis e seus custos. De posse desses dados já é
possível passar para a próxima etapa: O Planejamento Financeiro vai proporcionar a visualização completa
dos parâmetros, tendências e limites do negócio em questão. E finalmente deve ser feito um cronograma

que venha definir metas, a luz das definições previamente planejadas, metas essas a serem perseguidas e
cumpridas a todo custo, a fim de viabilizar a continuidade do negócio.
2 Recomendações
Uso frames com cuidado.
O uso de frames pode ajudar o usuário a navegar no site, mas cuidado com o espaço para a
visualização, com a impressão do conteúdo do site.
Recomenda-se agrupar os diferentes tipos de informação da sua página na Web.
Nós organizamos o que lemos e o que pensamos sobre uma informação, agrupando-a espacialmente. Nós
lemos uma página na web do mesmo modo como lemos outros tipos de informações ou veículos; tais com
revistas e jornais. Use cores e ícones para atrair a atenção e delimitar matérias existentes na sua página
Web. O olho é sempre atraído por elementos coloridos antes dos elementos em preto e branco e por
desenhos antes do texto e assim é possível criar um caminho monitorado para a absorção do conteúdo da
página.
Respeite as convenções de layout de leitura da informação.

Em países ocidentais isto significa caminhar pela informação no sentido de leitura natural da
esquerda para a direita e de cima para baixo. Dessa forma, prioritariamente, as informações mais atraentes
devem estar localizadas no canto superior esquerdo; motivando uma parada inicial para vislumbrar a
mensagem e a partir daí parte-se para conduzir o visitante ao final da página mas deve-se pretender que ele
continue visitando as demais páginas... Isso geralmente facilita a compreensão da informação pelo usuário.
Quando projetar a organização e a composição de elementos visuais da sua página na Web, recomenda-se
respeitar os seguintes princípios: hierarquia de informação, foco e ênfase, estrutura e equilíbrio, relação
entre os elementos, legibilidade e fluxo dos texto, e unidade de integração.
5.1 Hierarquia de Informação

Este princípio diz respeito à disposição da informação dentro de uma página na Web baseada em
sua importância relativa com os outros elementos visuais. O resultado dessa disposição afeta todos os
outros princípios de organização e composição de um layout e determina que informação o usuário vê e o
que ele é encorajado a fazer primeiro. Para considerar este princípio, faça estas perguntas:
• Qual informação é mais importante para o usuário? (Em outras palavras, quais são as prioridades
de um usuário quando encontra seu site?).
• O que o usuário quer ou precisa ver em primeiro, segundo e terceiro lugar na hierarquia da
informação pretendida, e assim por diante? ( O que o usuário vê primeiro deve corresponder à
prioridade do usuário).
5.2 Foco e Ênfase

O princípio do foco e ênfase auxilia o usuário na colocação de itens prioritários. Determinar o foco
envolve identificar a idéia central, ou o ponto focal, por atividade. Determine a ênfase escolhendo os
elementos que devem ser proeminentes, isolando-os de outros elementos ou fazendo com que eles se
sobressaiam de outra maneira de foram que as coisas ocorram dentro de um planejamento prévio e não
aleatóriamente.
Onde o usuário navega basicamente à procurando por informação, por exemplo... este fato, é uma
importante consideração na implementação do site, pois esse será o foco de sua navegação e o argumento
a ser explorado na composição da página.
5.3 Estrutura e Equilíbrio

O princípio de estrutura e equilíbrio é um dos mais importantes de um projeto visual. Sem uma
estrutura base e o perfeito equilíbrio dois diversos elementos não haverá atrativo ao visitante. Há falta de
ordem e de significado afeta todas as outras partes de projeto visual. O mais importante é que a falta de
estrutura e equilíbrio torna uma página na Web mais difícil de ser entendida pelo usuário.
5.4 Relacionamento de Elementos

O princípio do relacionamento de elementos reforça o princípio anterior. A colocação de um
elemento visual pode ajudar ou atrapalhar a comunicar uma mensagem, atraindo ou desvirtuando a atenção
do leitor. Não se pode ainda deixar de ter o cuidado em envolver todas as páginas com um contexto maior
e global do site o qual faz parte.
5.6 Unidade e Integração

O último princípio; unidade e integração, reflete na avaliação dada a página na Web em relação ao
site ao qual ela pertence. Quando uma página na Web é visualmente unificada com o site (endereço),

O usuário acha mais fácil navegar porque ela oferece um ambiente de navegação consistente e
previsível. Para implementar este princípio, considere o seguinte:
Como as diferentes páginas do site funcionam visualmente?
Como o projeto visual da página se relaciona com as outras páginas do site ou de outros sites em que é
usada? È importante lembrar que os usuários podem acessar sua página por qualquer uma das páginas
do seu Site provenientes de site e ferramentas de busca.
3 Observações
Uma página na Web precisa funcionar intuitivamente - ela precisa parecer do modo como funciona e
funcionar do modo como parece.
Cuidado com o tamanho, o espaçamento e a colocação da informação para que o ambiente seja
visualmente consistente e previsível.
A estrutura visual é importante para comunicar a proposta dos elementos exibidos em uma página.
Você pode usar cores (cor de fundo) para agrupar assuntos correlatos.
Use o alinhamento adjacente para links que formam um grupo de opções de assuntos exclusivos.
O uso de texto deve ser o mínimo possível para comunicar o máximo relativo a informação.
Para minimizar o movimento dos olhos, onde possível, o usuário deve ser inquirido a responder em uma
área diretamente adjacente à questão
As áreas para entrada de texto (quando houver) devem estar tão perto quanto possível da base da
tela devido ao fato de que a maioria dos usuários não são exímios datilógrafos e precisam olhar para o
teclado.
O início, ou a base da tela, são os melhores locais para mostrar informações sobre orientação, as
quais devem estar sempre visíveis e de fácil acesso.
As orientações para o usuário podem ser colocadas em áreas fixas ou móveis, ou apresentando-as
em menus pop-ups disponíveis (sempre sobre exclusiva requisição do usuário ou do próprio erro).
Glossário
Arranjo simétrico - Composição que apresenta elementos semelhantes em ambas as metades.

Cores complementares - São as cores que se encontram opostas no círculo cromático, como por exemplo
o vermelho e verde.
Cores monocromáticas - Cores produzidas por um único canhão de elétrons (dispositivo emissor de luz
usados nos monitores de vídeo). As cores policromáticas são produzidas por três canhões de elétrons
diferentes (Red, Green e Blue).
Cores neutras - São as cores que aumentam a visibilidade das outras cores, como os vários tons de cinza.
Croma = saturação - Pureza da cor dentro da escala do cinza a variante mais viva da cor percebida.
Fadiga visual - Cansaço visual causado pelo número excessivo de elementos visuais ou cores em uma
única página.
Fonte - Conjunto das letras do alfabeto, números e sinais desenhadas de modo característico.
Fonte com largura variável - Fontes que possuem larguras diferentes para letras que apresentam larguras
diferentes, por exemplo o "e" e o "i". Tipos Gráficos - Legibilidade, 6, Ideografia, 1986)
Grid - Uma grade composta de linhas verticais e horizontais.
Ícone - Alguma coisa que se parece com o seu significado. Ele é representativo e de fácil compreensão.
Ex.: Uma traço de tinta significando uma linha geométrica em uma ilustração no livro texto.
Layout - Organização espacial, diagramação de elementos visuais que compõem uma página na Web.
Legibilidade - Diz respeito a habilidade do leitor de encontrar, identificar, discriminar e absorver o texto com
sucesso.
Leiturabilidade - Diz respeito a facilidade de interpretação e apelo do texto.
Luminância = brilho = valor - Quantidade relativa de claro ou escuro em uma escala do preto ao branco
(também chamado de intensidade).
Matiz = tom (Cor) - Composição do comprimento de onda espectral da cor que produz a percepção de ser
azul, laranja, marrom, etc. (Marcus, 1992) É a variação qualitativa da cor.
Memória de curto termo - Também chamada de memória de trabalho, dura cerca de 20 segundos e é
capaz de armazenar cinco palavras ou formas, seis letras, sete cores e oito dígitos.
Peso - Quantidade de massa de uma fonte, por exemplo, uma fonte com estilo bold é pesada.
Poluição visual - Efeito causado pelo uso de um número excessivo de elementos visuais em uma única
página na Web.
Projeto visual - Organização espacial, diagramação de elementos visuais que fazem parte de um site
completo.
Ponto - Unidade de medida da letra. Um ponto equivale a 0,325 mm.
Símbolo - Um sinal que pode ser completamente arbitrário na sua aparência. Ex.: Uma bandeira para
representar uma país.

Conhecendo o FrontPage:
O Microsoft FrontPage 2000 é considerado um dos melhores programas na criação de web sites, e
se você pensa que precisará dominar algumas linguagens de programação para obter sites com aparência
profissional, ficará surpreso em saber que o FrontPage é capaz de executar automaticamente quase todas
as tarefas de programação que você precisar.
Iniciando o FrontPage 2000:
Para iniciar o FrontPage 2000 clique no ícone do

programa que está em Iniciar/Programas/ Microsoft FrontPage.
O FrontPage é um completo editore de Páginas Web, simples versátil e de fácil aplicação.

Trabalha com uma visualização chamada wysiwyg (what you see is what you get / o que se vê é o que se
tem). Dessa forma você pode visualizar ao mesmo tempo em que cria as suas páginas, exatamente como
elas serão exibidas na rede.
As pequenas, limitações do FrontPage foram definidas pela própria evolução das tecnologias da
computação. Você verá a facilidade com que o Programa se apropria de ferramentas, compatibilizando
qualquer efeitos no seu visual. Você pode criar suas Páginas, (todo o conteúdo do seu Site) no seu próprio
computador, com a possibilidade de fazer simulações, para visualizar efeitos, de aproximadamente 98% do
conteúdo total de suas páginas, sem estar conectado a internet.
Barra de ferramentas do FrontPage:

Uma das coisas que facilita muito o aprendizado é observada, logo de início: ao se examinar a barra
de ferramentas do Frontpage observa-se que é muito parecida com a do Words. Alguns títulos de funções,
logicamente são diferentes e ou são substituídos. Porém a linha principal de menus (desdobramento
vertical de diversos tópicos de diversos assuntos) na barra ferramentas é fundamentalmente o mesmo.
Configurações básicas do FrontPage:

O programa não necessita de qualquer configuração adicional prioritariamente. Mas um toque pessoal nos
é permitido: Primeiramente para aumentar a nossa área de trabalho vamos desmarcar a Barra de Modos e
Lista de Pasta, em exibir / Barra de Modos de exibição e Lista de pastas.
Em arquivos / visualizar no navegador, caso você possua, em seu computador, vários tipos de browsers
(programas de navegação ), será necessário à configuração de um único visualizador padrão para ser
utilizado, automaticamente pelo programa, durante os serviços. Vamos ver as configurações padrões do
seu programa: Não é necessário alteras as configurações...
Clique em Arquivo/Propriedades:
Em propriedades da página, você pode formatar o titulo da página (Guia – Geral), cor do plano
fundo (Guia Plano de fundo), cor do hiperlink ativo ou visitado, cor do texto e margens. Para formatar a cor
ou uma figura para o plano de fundo de sua página, a melhor opção é entrada em formatar/plano de fundo:
dentro da caixa de dialogo, na guia plano de fundo você poderá faze-lo com mais segurança. Caso queira
inserir uma figura de fundo marque a caixa: Figura de plano de fundo Clique em procurar selecione uma
figura entre os seus arquivos e clique em OK.
Na parte inferior do vídeo, na sua barra de tarefas é possível à você verificar à configuração automática do
programa, para uma determinada condição de visualização de sua página.
Conforme as configurações apresentada na figura abaixo, a página exibida levaria (0) zero segundos para
abrir totalmente no seu browser, quando acessada através de um moldem de 28 Kbs. Alterando essa
configuração você modifica as condições de visualização de sua pagina de acordo com a sua expectativa,
para o tempo, que o equipamento do seu visitante, necessitaria para abrir as suas páginas.
Frame e páginas em branco:
O FrontPage é um programa que oferece diversas Folhas de estilos diferentes. Quando

navegamos em alguns Sites, observamos que existem duas formas de apresentação muito distintas e bem
definidas entre si. Algumas páginas se apresentam totalmente lisas e outras, visivelmente, apresentam
diversas janelas de visualização dentro de uma mesma página. Nessas faixas normalmente são colocados
alguns banners ou logomarcas, ou ainda os links do seu Site na forma de menu. Essa faixa é chamada de
frame. Os frames, quando configurados para a utilização em um Site cria uma mobilidade muito
interessante. Essa modalidade configura, permanentemente, algumas das paginas do seu site, pois essas
terão um formato especialmente definido ra serem exibidas em dois ou mais quadros distintos, ou até
mesmo, que podem variar no seu ‘palco’ ou visualizador de acordo com a sua estrutura de composição.
Como vimos o frame cria uma janela onde é possível visualizar uma seqüência de outras páginas. É
como se cada quadro fosse uma página individual. Em Arquivo / Novo / Página – na guia página de
quadros, você faz a opção por executar a página com frame, e pode escolhe ente 10 opções diferentes; que
será configurada de acordo com a imagem que aparece na parte inferior da caixa de dialogo. Como vemos
na figura anterior; quando necessário for, o próprio browser providenciará a implementação das barras de
rolagens para cada quadro.
Sempre é bom lembrar que cada evento, novo em uma página deve ser rigorosamente analisado,
quanto à sua, perfeita visualização nos principais browsers, quanto ao tempo necessário para sua completa
exibição e quanto a segurança na exibição. Os mais pessimistas diriam que quanto menos evento a página
tiver mas segura será sua exibição... A coisa não funciona bem assim. Agora... é verdadeira a afirmativa
que quanto mais rápido for o evento completo da abertura de uma página menos esta sofrerá com as

inconstâncias proveniente da ação externa sob linha de transmissão além de possíveis instabilidade na rede
mundial.
Uma vez escolhida a disposição das páginas referentes aos frames basta confirmar com OK que
será exibido na sua área de trabalho a composição desejada.
Em cada página de quadro vemos a seguinte descrição:
O termo: Definir página inicial... destina-se a possibilidade de você simplesmente indicar para esse
quadro uma página que tenha sido confeccionada previamente para ser apresentada no quadro em
questão; como vemos na figura que segue:
Quanto ao termo Nova Página: digamos que ele é auto explicativo pois indica que acessando esse
comando uma página em branco tomará conta de todo o quadro, para que seja dado o início a sua
confecção.
Se clicarmos com a tecla da direita dentro de um quadro aparecerá entre várias outras opções uma
que nos permitirá configura as Propriedades do quadro.

Na parte inferior da caixa de Propriedades do quadro verificamos o botão que nos dá acesso a
configuração da paginas de quadro que é uma caixa bastante utilizada pelo simples fato de possibilitar a
remoção das bordas do quadro de páginas como vemos na figura que segue.
Ao tentar criar um hiperlink em uma página de quadros aparecerá a seguinte caixa de comandos:

Na seção Quadro de destino seremos levado a uma caixa que permitirá configurar, com o cursor do
mouse clicando sobre o quadro, qual das posições de quadro você gostaria de indicar para ser exibida a
pagina definida no campo 1 que deverá estar descrita na caixa denominada Endereço: melhor dizendo em
qual frame será mostrada a página de destino.
Nesta janela então teremos na área 1 poderemos escolher em qual frame será mostrado o arquivo
de destino. Na área 2,definimos o formato do quadro a ser mostrado. Na área 3 será transcrito
automaticamente o que foi definido acima, sendo que abaixo dessa nos é possível definir essa configuração
como padrão permanente do programa.
Transição de página:
Este é um efeito que se refere às condições de apresentação inicial e a transição entre as páginas
do site ; um diferencial que pode chamar a atenção para páginas importantes dentro do seu site. Estes
eventos são configurados acessando: Formatar / Transição de página onde abrirá a caixa de diálogos.
Se o evento for, por exemplo, sair da pagina – Fechar em circulo // aparece a guia Duração onde você
configura o tempo necessário para o desenvolvimento desse evento. Confirme com OK e faça a
visualização do resultado. Esses eventos são configurados para uma única página permitindo criar eventos
para várias páginas diferentes.

Conhecendo os arquivos do FrontPage:
O programa quando instalado, cria toda uma cadeia de patas especificas para o arquivamento de
suas páginas e imagens ( Minhas webs > images). Quando você salvar a sua primeira página outras pasta
se juntaram a elas; não devendo ser alteradas, pois isso poderia prejudicar a visualização de todo o
conjunto de paginas do sue site. Nestas pastas o programa fará a disposição de propriedades de eventos,
propriedades das páginas, propriedades de imagens e demais elementos que proporcionam a devida
visualização na web. Veja maiores detalhes em salvando e arquivando uma página criada.
Devemos observar que as pastas foram nomeadas com letras minúsculas. Isso não é por acaso... o
manuseio dos dados na web, por vários browsers deve conter uma unidade para facilitar a leitura, dos
mesmos, evitando a possibilidade de erro de leitura das páginas. Assim sendo devemos evitar no nome de
arquivo a ser manuseado a colocação de letras maiúsculas, acentos e qualquer tipo de caracteres
especiais.
As diferentes formas de visualização do FrontPage:
O FrontPage trás três guias de visualizações localizadas na barra de tarefas no pé da pagina.
Guia normal.
Onde você digita e edita o texto, inclui figuras, componentes, cria e edita as tabelas sem se
preocupar com os códigos HTML e como são gerados.
Guia HTML.
Esta guia exibe os códigos html criados pelo FrontPage para que a sua página seja exibida sem
falhas. Nessa guia é possível editar, com códigos html , algumas funções e fazer algumas alterações ou
inserções de scripts especiais previamente criados. Livros de visitas, chats ou fóruns são exemplos de
scripts que deverão necessitar de algumas configurações em Html. Essas configurações deverão ser
efetuadas no Bloco de Notas e poderá ser visualizada no FrontPage.
Guia Visualização.
Como o próprio nome já diz, essa guia exibe o resultado de seu trabalho (página web). Nessa
visualização algumas funções como Java ou Java scripts não serão visualizadas. Porém você pode fazer
uma visada panorâmica de toda a página, sem que obrigatoriamente, você tenha de salvar o que esta feito.
Para efetuar uma visualização completa você deve, primeiramente salvar este arquivo nas pastas corretas,
e depois clicar em: Arquivo / Visualizar no navegador ou simplesmente clicar na ferramenta Visualizar no
navegador , junto a barra do menu principal.

Utilizando os modelos do FrontPage (vantagens e desvantagens):
Entrando em formatar / Tema, no menu principal; você terá acesso a um arquivo contendo
inúmeros exemplos de modelos para páginas da web, possibilitando que você agilize a confecção de sua
página. Basta escolher o tema que um assistente lhe ajudará nas modificações possíveis para personalizar
o conjunto. Essa facilidade toda pode parecer muito vantajosa devido ao imediatismo na confecção de uma
página. Acontece que o designer dessas páginas estão desatualizados em relação as tendências atuais,
que é de uma página mais limpa e com uma leitura mais clean. Um outro fator negativo é que essas
páginas criam vínculos grandes e pesados, produzindo uma exibição lenta, devido a carga das figuras
agregadas a elas; sendo esse a sua maior desvantagem. Um outro ponto negativo está na inviabilidade de
criar algumas modificações, devido à própria configuração estética da página.

Conhecendo as ferramentas para a edição de imagens e textos do FrontPage:
As barras de ferramentas mostradas na figura anterior são dois conjuntos de soluções, de fácil
acesso, possibilitando que você crie uma gama de alterações e formatações que deverá suprir a maioria
das necessidades que possam surgir. O manuseio é simples... Teste agora mesmo... clique sobre uma
figura ou texto, demarcando qualquer um deles e divirta-se com as soluções possíveis.
O editor de imagens e suas vantagens.

Quando vimos as configurações básicas do programa, comentamos que alguns elementos
adicionados a página poderia, interferir no tempo de abertura para visualização da mesma. As figuras são
responsáveis por uma carga muito grande dentro da página, mas é possível obter-se, facilmente reduções
nessa carga, fazendo uso de editores de imagens. Os formatos de apresentação de uma imagem na tela e
suas propriedades podem ser alterados, com muito pouco comprometimento da qualidade ou do tamanho
da figura. Dentro de um editor de imagens, você poderá obter recortes, acabamentos, modificações e até
acrescentar detalhes de continuidade ou textos as imagens. Um bom editor de imagens é um acessório
fundamental para a criação de páginas web. Mais a frente você verá que recursos o FrontPage lhe oferece
nessa área.
Quando falamos em qualidade desse tipo de programa; estamos realmente falando em quantidade
de artifícios proporcionados, nas possibilidades de leitura em diferentes formatos e na capacidade de
edição que ele possa oferecer.
Alguns editores de imagens, textos e programas para suporte ao Frontpage:

A abrangência na utilização de editores, para textos e imagens esta na propriedade que o programa
tenha de visualizar a grande quantidade de formatos que ambos podem adquirir.
Alguns formatos de imagens, assim como algumas fontes, podem até ser capturadas pelo seu
computador, porém, podem não ser visualizadas, ou sofrer alterações que prejudiquem a qualidade no
conjunto da pagina exibida, por falta das propriedades da fonte ou do browser para a visualização.
Passamos agora a citar alguns programas de boa qualidade e que possuam afinidades junto ao
FrontPage e suas características básicas.
Adobe Photoshop – Genial. Vai permitir a você criar alterações cirúrgicas em imagens em muitos
formatos com grande qualidade.
3D studio Max – Pioneiro em animações para filmes, pois permite acabamentos em imagens e textos
em 3D.

Corel Draw – Talvez... o mais completo programa para o desenho e a criação de imagens em um grande
número de formatos com vários softwares / aplicativos.
Macromedia Flash – Especificamente projetado para criar animações para Web possui uma imensidão de
efeitos especiais e grande numero de aplicativos associados.
Anfy Team – Possui uma grande quantidade de scripts prontos, que podem ser reconfigurados e
personalizados para utilização na sua web; porém sua composição em Applets Java é sensível e pode não
ser visto corretamente quando ocorrer algum problema de instabilidade na rede.
WinZip – Um compactador de arquivos de larga utilização no mundo reduz até 30% do arquivo.
Download accelertor – Um gerenciador de downloads de boa afinidade com o windows, que realmente
pode ampliar a velocidade de captura de arquivos em até 300 %.
CuteFTP – Programa essencial para a transferência de arquivos entre a sua máquina e a maquina do
provedor de webs.
Os programas citados possuem ferramentas fundamentais para quem pretende levar a sério a
edição de páginas webs. Excetuando os programas de edição de imagens citados, os demais são
encontrados na rede com facilidade entre muitos outros equivalentes e ou similares. Outra coisa muito
interessante é que quase todos podem ser encontrados no idioma português do Brasil.
Digitando textos, inserindo imagens e componentes no FrontPage.

Para iniciar a inserção de um texto em sua página será preciso descrever as propriedades da fonte,
da cor, do tamanho e etc... por exemplo: <FONTFACE=”ARIAL” COLOR=”BLUE” SIZE=2>.
Essa seria a descrição da fonte a ser utilizada em um texto; mas não se preocupe com essas tags.
Elas serão inseridas na sua pagina automaticamente pelo programa; você não vai ter de escrever nada
alem do seu texto, configurar sua fonte e pronto. Tudo é feito como os editores de texto convencionais,
como no Word, por exemplo. O programa cria os códigos necessários à formatação de fonte cor, tamanho
da letra e a fonte. Você pode testar esses artifícios, digitando, normalmente um texto, selecionando com o
mouse e clicando em Negrito – Itálico – Sublinhado; com a ferramenta abaixo ou entrando em Formatar
Fonte.
Clicando nas caixas, conforme demonstrado abaixo também é possível formatar outros detalhes; como
inclusive é possível definir estilos de textos para títulos e etc...
Numeração / Marcadores:
O texto por vezes precisa de uma descrição formatada com ícones ou até com itens numerados o
que é muito fácil de se obter com as ferramentas que segue.
Par afixar ou retirar a numeração ou marcadores; basta selecionar o texto em foco, com o auxilio do mouse
e depois clicar no ícone correspondente.
O texto ficará com no exemplo abaixo:

Exemplo de Numeração:
1. Apostila Linux:
2. Apostila Novel
3. Apostila Unix
4. Apostila Windows
O texto ficará com no exemplo abaixo:

Exemplo de Marcadores:
 Linux:
 Novel
 Unix
 Windows

Imagens:
Incluir uma imagem em uma página HTML é uma tarefa bem simples e que requer alguns requisitos
básicos. A imagem exibida deve estar disponível preferencialmente nos formatos GIF ou JPG. O formato
GIF é o que mais se popularizou no início da Web. Porém o formato JPG tomou o seu lugar pelas
vantagens que oferece em termos a carga de tamanho da imagem. No formato JPG, uma imagem pode ser
reduzida em até dez vezes comparada ao seu tamanho original.
O comando inserir imagem ou
Para inserir uma figura na sua Home Page, você deve usar o comando inserir / imagem no menu
principal e optar por arquivo ou clip art. Você deve pensar na imagem como se ela ocupasse o lugar de um
caractere na linha onde é inserido o comando. Se você colocar mais de uma imagem em seqüência, as
imagens serão exibidas na mesma linha, se o tamanho permitir. Para que a imagem apareça sozinha em
uma outra linha da tela é necessário coloca-la em uma tabela para facilitar a edição. Esse assunto será
discutido mais a frente. Uma imagem também pode ficar centralizada, na horizontal ou vertical, para isso,
basta usar os mesmos comandos de alinhamento de texto conforme desenho abaixo.
Para a edição de textos e imagens sempre é possível acessar as

propriedades da tabela em que esta envolvendo o objeto a ser editado.
Plano de fundo (Backgrounds) com imagens:

Usar uma imagem ou criar um fundo colorido pode ser necessário em algum momento para a sua
página. Você pode ir mais além e usar um plano de fundo, muito mais, elaborado com o uso de pequenas
imagens, ou fazer uso de algum script Java que crie algum efeito especial (como: neve caindo, por
exemplo). A imagem será espalhada por toda a página de modo a preencher o fundo da tela. O uso dessa
técnica permitirá que você utilize para o fundo da sua página o logotipo de sua empresa, uma foto ou uma
paisagem, etc...
Cuidados com o seu Plano de fundo:

Antes de começar a usar imagens para o fundo da sua Home Page, você deve considerar alguns
pontos importantes.
Um aspecto importante dessa técnica é que a imagem utilizada deve ser de carga pequena, pois ao
contrário, levará muito tempo para o browser carregar a página. Para evitar isso, aí vai a dica: use imagens
com menos de 10 Kb de tamanho, na medida do possível.
Procure usar imagens com poucas cores para evitar que o texto fique difícil de ser lido. Algumas imagens
fantásticas ficam horríveis como segundo plano.
Procure usar uma imagem de fundo do menor tamanho possível. Se quiser criar uma textura de
fundo, crie uma imagem que tenha a largura da tela (800 pixels) e com a altura de 5 ou 10 pixels
no máximo. Como a imagem de fundo é inserida uma primeira vez e depois copiada para preencher o resto
da tela, você terá o efeito de ter uma única figura de fundo.
Evite usar uma figura no fundo com muitos contrastes co o conjunto das informações exibidas na
pagina. A legibilidade não pode, em hipótese alguma, ser prejudicada. Nesses casos, é interessante tentar
mudar a cor do texto para obter clareza, ou até mesmo desistir do fundo. Você pode até mesmo usar uma
grande imagem no fundo, porém, observando o tempo que ela levará para ser transferida (exibida,
carregada no browser). Toda vez que uma imagem é especificada como background, a tela é exibida
inicialmente com o fundo padrão (cinza ou branco), e só depois a figura é transferida para página. (Observe
as descrições de cada item à ser exibido na página que esta sendo aberta no browser; na barra de tarefas,
ao pé da página.)
Prefira sempre um fundo com pouca variação de tons, com baixa intensidade luminosa,
contratando, ai sim com a luminosidade do texto, das imagens e demais informações conferidas a página.
Lembre-se sempre de que o maior foco de atenção de uma página é a informação transmitida por meio do
texto e das imagens ilustrativas da informação. Não prejudique o conteúdo de seu site em função de uma
imagem que não acrescentará nada à informação muito mais necessária.
Imagens entrelaçadas:
Uma característica da imagem GIF pode ser bastante útil na utilização em suas páginas. A primeira
é a possibilidade de usar um fundo transparente para a imagem de modo que ao ser carregada, a cor de
fundo da imagem desaparece, permitindo a visualização do fundo da página. Uma imagem GIF com fundo
transparente pode ser gerada por intermédio de diversos programas de tratamento de imagem. Mesmo

uma imagem existente pode ser facilmente convertida com o uso de editores de imagens ou com a
ferramenta (definir cor transparente) na caixa de ferramenta de edição de imagens do FrontPage.
Exibindo a barra de ferramentas de Imagem:

Talvez você não tenha visto esta barra de ferramentas porque ela não foi ativada. Vamos fazer uma
experiência: crie uma nova página, insira uma imagem qualquer nela e clique sobre o gráfico. Deverá
aparecer em algum lugar da janela uma barra como a que está a cima:
Caso não apareça; você pode acionar essa barra de ferramenta no menu principal escolhendo a
opção Exibir / barra de ferramentas e depois verifique se a opção "Imagem" tem uma marca antes dela.
Não? Então clique sobre a opção. Agora a janela deverá estar visível. A seguir iremos ver algumas funções
desta ferramenta.
Inserindo Figuras:
Vejamos agora como inserir, na sua página, uma figura, do Clip arts ou de um arquivo já
digitalizado:
Para inserir uma figura, do Clip-arts ou de um

arquivo clique em:
Inserir / Figura – Clip-arts ou Arquivo
Localizar a figura e proceder conforme comando da
caixa de diálogos.
Criando uma imagem mapeada (Área interativa):

Com o FrontPage, você pode pegar uma figura e criar, em várias partes dela, links para um local diferente.
Vamos ver um exemplo bem ilustrativo: suponha que você tenha uma imagem do mapa do Brasil e queira
que, quando clicasse em cada estado, o browser fosse para uma página com um conjunto de informações
relativas à aquele estado. Com as áreas interativas, isto é perfeitamente possível. Os botões da barra de
ferramentas de imagens que utilizamos para o mapeamento de imagens são os seguintes:
1- Botão de seleção. Com ele, você seleciona um determinado mapeamento na sua imagem.
2- Cria um mapeamento com uma área retangular. Basta clicar neste botão, e na área da sua imagem,
desenhar a área de mapeamento como se estivesse desenhando um retângulo em um programa gráfico
(clique no ponto inicial e arraste o mouse sem soltar o botão até que tenha desenhado a área desejada).
Esta área pode ser modificada posteriormente através do botão de seleção.
3- Cria um mapeamento com uma área circular. O funcionamento é semelhante ao mapeamento de área
retangular.
4- Cria um mapeamento com formato polígono. Muito utilizado para formas irregulares. Basta que você
clique sobre o botão e depois no ponto inicial do seu polígono na imagem. Mova o mouse para o ponto
seguinte e clique. E assim continue, até que volte ao ponto inicial e feche o polígono.
5- Realçar áreas interativas. Serve para destacar um ou mais efeito interativo em uma figura. Para usá-lo,
basta clicar no botão, com um mapeamento selecionado ou não. A imagem dará lugar a um fundo branco e
os mapeamentos estarão destacados em cor escura.

Vamos ver um exemplo prático. No seu FrontPage, crie uma nova página e, insira uma imagem. Clicando
sobre a imagem, irá aparecer a barra de ferramentas de imagem...
Agora, tente criar um mapeamento retangular sobre o quadrado amarelo dentro da imagem. Depois
que você desenhar o retângulo, aparecerá a caixa de diálogo pedindo para especificar qual página será o
link daquele mapeamento.
Depois de pronto, você pode solicitar uma visualização na página. Se passar o cursor do mouse
sobre o quadrado amarelo, pode-se perceber que naquela área existe um link para outra página. Tente criar
agora um mapeamento circular e depois um mapeamento poligonal seguindo uma das regiões do mapa.
Para alterar o tamanho de um mapeamento, selecione-o através do botão de seleção (1) e depois posicione
o cursor do mouse, sobre um dos pequenos quadrados escuros que estão em volta do mapeamento.
Clicando sobre e eles e arrastando, você irá também alterar o formato do mapeamento.
Criando um texto sobre a imagem:

Você pode também colocar texto sobre uma imagem. Por exemplo: sobre a figura do mapa anterior,
podemos colocar os nomes dos produtos que eles produzem. Continuando o nosso exercício anterior, clique
sobre a imagem do mapa para ativar a barra de ferramentas de imagem, e clique sobre o botão texto .
Irá aparecer uma caixa e texto, vazia na imagem, com um cursor de texto piscando, basta digitar o texto que
você quer. Você pode alterar o tamanho do mapeamento, arrastá-lo através da imagem e alterar a
formatação da fonte através da barra de formatação do FrontPage. Também se pode criar hyperlinks para
os textos. Veja um exemplo de como ficaria nosso mapa com essa opção:

Há uma observação importante a fazer: Quando você usa esta ferramenta, as imagens geradas
com os textos, sobrepostos, serão gravadas numa pasta "_derived". Portanto, se você for atualizar a sua
página via FTP (com a função "Publish" não tem problema), lembre-se de enviar também esta pasta.
Tornando uma cor de imagem transparente:

Como já vimos é fácil deixar uma determinada cor de uma imagem transparente (ou seja, no lugar dela,
aparecerá a cor ou imagem de fundo da página). No nosso exemplo, vamos deixar a cor azul do mapa
transparente. Clique na imagem e depois no botão definir cor transparente da barra de ferramentas de
imagem. A partir daí, na imagem, clique na cor que você quer que fique transparente (no nosso caso, a cor
azul). Veja o resultado abaixo:
Exibindo uma parte de uma figura:

Da figura de um gráfico, por exemplo, podemos ter interesse em exibir somente uma parte dele em
um setor de uma descrição. Pode-se usar um editor gráfico para recortar um pedaço da figura, ou senão o
botão Cortar da nossa barra de ferramentas. De um clique na figura para exibir a caixa de ferramentas
Figuras.
Depois
Antes
No modo de exibição Página, clique na figura; e depois...

Clique em Cortar , na barra de ferramentas Figuras.
Uma caixa de corte aparece sobre a figura.
Clicando e arrastando as alças da caixa, redimensione-a para incluir a parte da figura que você deseja
manter. Para você mesmo desenhar a caixa de corte, clique fora da mesma, porém dentro da figura e, em
seguida, desenhe a caixa.
Clique em Cortar novamente para remover a área que está por fora da caixa de corte.
Para colocarmos uma figura, seja ela qual for, como plano de fundo é preciso ter o cuidado de que
ela não fique competindo com a visualização do conteúdo da pagina; fazer com que ela não atrapalhe a
leitura informação principal contida na página. Uma boa opção, muitas vezes, pode ser a função Desbotar,
que deixa a figura mais clara. Para utilizar este recurso em sua página; clique na figura e depois no botão
branco e preto . Veja o resultado abaixo:

Transformando uma figura colorida em preto e branco:
O botão branco e preto faz com que uma figura fique em preto e branco. É só clicar na figura e
depois clicar neste botão. Para restaurar, clique nela e depois no botão restaurar .
Rotacionando e espelhando uma imagem:

Agora, vamos ver o conjunto de botões abaixo:
1- Gira a imagem 90 graus à esquerda.

2- Gira a imagem 90 graus à direita.
3- Faz um espelhamento horizontal da imagem.
4- Espelhamento vertical da imagem.
Para aplicar o efeito na imagem, clique sobre ela e depois em um dos botões acima.
Alterando o Brilho e o Contraste:

Temos na caixa de ferramentas, quatro botões para alterar o brilho e o contraste de uma imagem. São eles:
1- Aumenta o contraste.
2- Diminui o contraste.
3- Aumenta o brilho.
4- Diminui o brilho.
Para aplicar as alterações, a regra é a mesma: clique sobre a imagem e na caixa de ferramentas de
imagem, use um dos botões acima.
Criando um efeito "botão" em uma imagem:

Para criar este efeito, clique sobre a imagem e depois sobre o botão chanfrar . Uma outra opção é
inserir a figura em uma tabela e trabalhar com as propriedades da tabela para criar um efeito de ressalto, ou
rebaixo, por exemplo. Veja o resultado, do botão chanfrar; abaixo, na nossa figura do mapa:

Alterando o tamanho da imagem:
Para alterar o tamanho de uma imagem, basta clicar nela e com o cursor do mouse, posicione-se
em um dos quadrados pretos em volta da figura. A partir daí, clique e arraste o cursor do mouse e a figura
alterará o seu tamanho. Vale lembrar que isso só altera o tamanho de exibição.
A figura no arquivo permanece no tamanho original. Dessa forma será informado ao Browser que
deve apresentar a imagem com o tamanho definido manualmente. Isso não interfere por exemplo, com a
carga que afigura possui no seu tamanho original: Se a figura / uma foto 12X7 cm escaneada em é
composta por uma carga de 80 Kbs e você força a visualização em um tamanho de 4X2 , ela ainda assim
continuará com a carga de 80 Kbs. Após alterar, manualmente o tamanho da figura, você deverá de clicar
no botão criar nova amostra e dessa forma proceder a alteração da imagem definitivamente, na
pagina e no arquivo e assim reduzir proporcionalmente a sua carga, em valores que serão definidos pela
relação do resultado encontrado na redução da imagem.
Criando e configurando uma tabela e suas propriedades no FrontPages.

Encontrar ferramentas para configurar a posição e o alinhamento, vertical / horizontal; no espaço,
para um texto ou imagem é fácil, veja as opções que seguem:

Esse tipo de posicionamento vai condicionar a página e a célula de uma tabela, como uma única coisa.
Para facilitar a criação de um bom lay out de uma página, definitivamente você verá que se torna
necessário e até mesmo imprescindível a divisão prévia da página na forma de uma tabela; previamente,
editada, dividida, para obter a composição esperada, quanto ao posicionamento dos diversos setores
necessário da página. Ai então deverá ser utilizado as ferramentas para melhorar, com “ajustes finos”, a
posição de textos ou figuras no interior de cada célula da tabela.
A utilização da tabela vai garantir com muito mais qualidade que a sua página seja vista na forma
que foi projetada; reduzindo as possibilidades de deformação das posições vista nos browsers de terceiros.
A figura ao lado exibe a configuração básica do

browser da Microsoft o Internet explore. Caso seja
alterada essa configuração fatalmente causará
deformação de algumas páginas
As tabelas são acessadas na

barra de menu principal,
entrando em tabela ou
através da ferramenta
própria.
Para dar início aos trabalhos no FrontPages, faça um projeto do lay-out de sua página, definindo as
devidas posições de cada coisa no arranjo geral. Por Exemplo:

A tabela acima foi obtida da seguinte forma:
Conforme o desenho ao lado.
Mesclando a linha superior, a partir do mouse.
E dividindo a célula inferior esquerda em 04 linhas, a partir do mouse.
Para modificar o aspecto de uma tabela você deverá clicar com a tecla direita do
mouse sobre a célula, ou selecionar as células a serem modificadas e localizar na
janela de texto o que pretende fazer; conforme a figura a baixo.
As tabelas e a células, possuem diversas propriedades que define a sua forma, cor, espessura e
tipo de bordas, transparência, posicionamento interno, tamanho etc... Para acessar essas propriedades
basta seguir o procedimento anterior e na janela selecionar as devidas propriedades. Depois na caixa que
abre você configura como quiser.

Leia atentamente todas as informações contidas em cada caixa de dialogo, teste seus efeitos.
Qualquer configuração feita aqui só terá efeito sobre a tabela utilizada para tal; não causando efeitos em
outras tabelas da página. Essas caixas de diálogos serão utilizadas vastamente na configuração de suas
tabelas; no futuro. Uma configuração se tornará um padrão nos serviços. Em Bordas / Tamanho, a
configuração sendo alterada para zero deixará a tabela invisível durante a visualização.
Definindo e trabalhando com Hiperlinks (interno ou externo).

Até agora você aprendeu a criar documentos interessantes, mas que poderiam ter sido gerados
diretamente com um editor de texto. A principal atração da Internet é a criação de documentos com o
conceito de hipertexto, ou seja, um documento que é ligado a outros por meio de conexões especiais
chamadas hyperlinks. Com esse conceito, você pode criar documentos que façam referência a um endereço
qualquer do computador ou da web e permitem ao usuário acessar essas referências, não importando se
elas estão em outra página da web, no seu micro ou em qualquer servidor da rede.
O uso de hipertexto também facilita a criação de documentos extensos, cujas seções ou tópicos podem ser
rapidamente acessados por meios de links. Imagine que você cria uma página sobre um determinado
assunto, no qual vários tópicos são abordados. Assim como um livro, você cria todo o texto do documento e,
depois, um sumário no início indicando os tópicos desse documento. Se quiser acessar diretamente o texto
de um tópico, basta clicar sobre o item do tópico no sumário e ele será imediatamente exibido.
O grande atrativo da Internet e da Web é a possibilidade de trazer o mundo para a sua área de trabalho com
um clique do mouse.
Um Hiperlink ou como iremos usar “link”, é o caminho, ativo, com a função de acionar a abertura de
uma nova página. Essa página ao ser aberta poderá ser apresentada da seguinte forma:
Excluindo a página exibida para a abertura da nova página acionada, ficando apenas a nova página aberta.
(Mesmo quadro)
Abrindo á mesma sobre a página atual se colocando em primeiro plano, porém deixando ambas abertas.
(página inteira) Abrindo a nova página com tamanho reduzido (uma pequena caixa) deixando ambas
abertas. (nova janela)
Um hiperlink quando acionado deve levar à um arquivo, a um indicador ou página web. Se a

página acionada se encontra dentro do seu site é chamado de hiperlink interno. Quando um hiperlink é
acionado, em uma de suas páginas e o seu browser é direcionado a uma página de um outro site; fora do
seu, é denominado de hiperlink externo.
Para obter o artifício do hiperlink, basta selecionar uma figura ou uma porção de texto; acionar o
ícone inserir hiperlink e encontrar na lista do seu Site o endereço ou digitar a URL da página
pretendida, ou ainda digitar local onde encontra-se o arquivo ou o texto do indicador que deseja acessar
com o link.
A caixa de diálogo exposta à partir do ícone de hiperlink, conforme figura abaixo; exibe uma lista de
arquivos de páginas web já confeccionada anteriormente. Clicando sobre uma delas cria o direcionamento
para o link, a mesma aparecerá descrita automaticamente na caixa URL. Caso queira navegar até uma
determinada página na Web, basta clicar no ícone apropriado. Se desejar é possível digitar o caminho do
link externo ou interno.
É possível também transformar o ponto de aplicação de um hiperlink em um botão direcionado
com um endereço de correio para receber; por exemplo; ou sugestões sobre os serviços prestados no seu
Site. É importante lembrar que o caminho referente ao hiperlink é um texto que será manuseado como
uma propriedade da Web, portanto não deve conter caracteres especiais, maiúsculas, acentos ou espaços.

Criar um indicador: (marcador)
Um indicador é um direcionamento entre um texto selecionado á uma porção de texto em uma

página da web. Você pode usar indicadores como destino para um hyperlink. Por exemplo, você pode usar
indicadores para navegar em uma página extensa que contenha cinco títulos. Crie um indicador em cada
título e, na parte superior da página, adicione um índice analítico que liste esses títulos. Cada entrada no
índice analítico é um hyperlink que usa um título indicado como destino. Para criar o indicador basta você
selecionar, com o mouse, o texto que deseja que seja acessado como indicador; esse será o destino de um
hyperlink. Independente de estar ou não na mesma página; selecione um texto ou imagem que deseja ter
como referencia (indicador) para um determinado arquivo ou texto suplementar o indicador. Clique com a
tecla direita do mouse sobre o texto demarcado e depois em hyperlink; como na figura abaixo. Você
também pode; após selecionar o texto a ser lincado, clicar direto no ícone do hyperlink no menu principal,
conforme é mostrado na figura abaixo.
A caixa de diálogos de criar hiperlink, terá na sua parte inferior a guia: indicador. Abrindo essa
guia; deverão estar descritos todos os textos demarcados, basta então selecionar o desejado. Veja a figura
abaixo.

Quando o visitante do site clica no hyperlink, (Tapetes) a parte de texto relacionada de qualquer que
seja a página será exibida dentro da janela do navegador; nesse exemplo teremos o texto: “Saiba como”.
Salvando e arquivando uma página criada:

Como já foi dito em Conhecendo os arquivos do FrontPage, existem cuidados a serem tomados na
hora de salvar uma página. O programa tem uma organização própria, muito peculiar, que deve ser
respeitada e não deve ser alterada de forma alguma, pois só assim garantimos para que as informações
necessárias possam ser encontradas pelos diversos browsers. Para entender perfeitamente o que estamos
informando basta pegar uma página já salvada: clicando em cima de uma figura exibida na página, com a
tecla direita do mouse, aparecerá uma janela onde você poderá solicitar que seja exibida a propriedade da
figura. Na parte superior do quadro geral, dentro da caixa de texto consta a descrição do nome e da devida
posição onde se encontra a figura. Dessa forma se essa descrição não condiz com a verdade; pois você
mudou a imagem de lugar, a mesma não será exibida no browser, pelo fato de não ser encontrada na
localização especificada.
Ao salvar uma página, o programa organizará,

automaticamente, todo arquivo referente a cada propriedade de
página, incluindo toda a hierarquia necessária a perfeita exibição.
Tudo será arquivado à partir da pasta Minhas Webs. Caso ela não
tenha sido criada na instalação do programa poderá ser criada
conforme o caminho abaixo.
Dentro de minhas webs, junto as

páginas, deverão ficar as
propriedades de interatividade dos
arquivos de Java ou
Java script.

Na pasta images (nome criado pelo programa)
deverão ficar toadas as imagens de todas as páginas.
Porém; alguns scripts podem necessitar ter seus
arquivos muito próximos causando o seu arquivamento
junto as propriedades e páginas.
Nota: Além dos cuidados necessários com a grafia, que nomeia as páginas e imagens, (já discutido
repetida vezes) devemos ter cuidados em nomear as imagens. Tenha em mente que será necessário,
futuramente manipular essa imagem, separadamente da página; o seu nome deve possibilitar que você
identifique imediatamente a perfeita localização nas páginas do site. Para figuras que são utilizadas por
diversas vezes, em várias páginas, diferentes, caso tenham alguma diferença na exibição, como tamanho,
por exemplo: devem ser nomeadas de forma diferente evitando transtornos futuros. A repetição não é o
problema maior e sim a edição de uma cópia, ou até a eliminação da mesma, se for excluída do arquivo não
será visualizada em página alguma.
A figura anterior mostra a caixa de dialogo aberta, quando você clica em Arquivo / Salvar. Ou no
ícone . Na parte central, da figura anterior, aparece uma outra caixa de diálogos; a mesma refere-se ao
título da página que deverá aparecer, no topo da página, junto ao nome do browser que visualiza a sua
página; essa caixa surge após clicar sobre o botão Alterar....I Procedimento:
Após a abrir a caixa Salvar, digite o nome da sua página (nome que deverá ter a sua página) dentro da
caixa Nome do arquivo (alterando nova_pagina).
Nota importante:
Se você reparar bem o titulo da página atual; dentro da caixa nova_pagina, não contem espaços, o
que é obtido com um traço denominado underlined (sublinhado) que não pode ser substituído por Hífen, não
contem maiúsculas ou acentos.

O fato ocorre, pois o nome do arquivo deverá ser manipulado pelo browser com propriedade web;
esse é o endereço que deverá ser digitado na área de descrição do browser, conforme indicamos à seguir:
http://www.url.provedor (quando sem domínio)/nome_do_arquivo.htm (protocolo e endereço completo será
comentado mais a frente em curiosidades).
A primeira página, a página inicial, aquela que será o indexador de todo o seu site receberá o titulo
index.html. Esse termo indica ao browser que as informações contidas em tal URL deverá ser acessadas à
partir dele e assim sendo deverá ser interpretado como a página inicial.
Todas as demais páginas serão descritas com o nome de arquivo que melhor convir e somente.
Dessa forma o programa irá descrever, automaticamente como arquivo.htm, assim serão todas as demais
páginas internas do seu site.
2) Clicando na tecla Alterar... uma pequena caixa de diálogo é aberta par que você digite um título
ou mensagem que queira ver exibida no topo do browser de visualização a sua página. Como essa
descrição é exclusiva da página e será manipulada como texto, pode ser descrita livremente, com qualquer
tipo de caractere desejado.
Agora podemos clicar na tecla Salvar pois esta quase tudo definido, restando definir as
propriedades da figura o que será possível na caixa que se abrirá na seqüência; conforme figura abaixo:
A figura que esta descrita para ser salva, é um Clip art, que precisará ser renomeada com um nome
conhecido e fundamentalmente com letra minúscula. Basta para isso clicar em Renomear e proceder a
alteração. Antes de dar o OK será preciso que seja verificado, na guia Pasta a exata descrição quanto a
localização em que a figura será salva. Essa descrição deverá ser identificada como a pasta images, que
está dentro da sua pasta geral de Webs (Minhas webs).
Os comandos avançados do FrontPage (sliders, banners, letreiros digitais, permuta de figuras, formulários e
sons).
Como é dito na rede, o que veremos agora é como “turbinar” as páginas de um site. O FrontPage
contém uma grande quantidade de ferramentas que permitem criar artifícios muito úteis.

A figura anterior exibe o desdobramento do Menu Principal onde se encontram os mais utilizados
recursos do programa.
Esses são componentes utilizados para criar

planilhas e gráficos que serão transcritos para
códigos de html. A base de utilização dessas
ferramentas será definida conforme o uso padrão do
programa Excel.
Esses componentes são muito úteis e fáceis de usar. Sua

aplicação será visto caso a caso. E importante frisar que os
artifícios baseados em tecnologia DHTML poderão não ser
visualizado corretamente em alguns browsers; por exemplo o
Netscape > 3.0.
- Esse é um artifício para a criação de banners. Podemos dizer

que seu aspecto é o de um projetor de slides; um expositor seqüencial de imagens ou textos-imagens, em
intervalos regulares de tempo que apresentam diversas formas de serem expostos, denominados como
Efeitos de transição.
As imagens e os textos-imagens (textos editados e salvos como imagem), deverão ser preparados,
em um Editor de imagens, previamente, com propriedades e tamanhos similares para serem utilizados por
este efeito em sua página.
Tendo preparado as imagens que serão utilizadas no seu banner, basta colocar o cursor do mouse
no respectivo espaço, na página e clicar na guia do menu correspondente para ter na tela a caixa de
diálogos onde será configurado o seu banner.

Agora passamos a configurar o efeito na caixa de propriedades do gerenciador de anúncio em faixa:
A primeira configuração é definir o tamanho do banner que está sendo feito. Caso queira, você
poderá esta digitalizando manualmente, com o auxilio do mouse, clicando e arrastando o efeito para
adequá-lo a sua figura.
Na seqüência iremos configurar o efeito de transição:
Os diversos efeitos descritos na figura ao lado darão um toque

todo especial no seu banner. Teste cada um deles para conhecer
melhor como se definem.
A velocidade em que os slides serão expostos é configurado na guia: Mostrar cada figura por (segundos).
Se este banner necessitar de um link externo basta digitar o direcionamento da URL completo na
guia vincular a:
Se o link for interno você deve clicar no botão procurar e seguir até a página desejada.
Agora só resta adicionar cada figura na ordem desejada e clicar em OK para finalizar a configuração
do efeito.

- Um contador de acesso é um elemento que vai lhe permitir criar dados
estatísticos para conhecer a utilização de suas páginas.
Para colocar um contador de visitas em uma página

web, vá no menu "Inserir - Componentes – Contador de
Acesso". Aparecerá a caixa de diálogo ao lado:
Este componente do FrontPage só funcionará
corretamente se no servidor onde a página estiver
hospedada suportar as extensões do FrontPage.
Caso não tenha condições de colocar o contador do
FrontPage na sua página, você ainda pode usar um
serviço contador gratuito disponível na Internet ou um
serviço de estatísticas de acesso gratuito. Quando
publicamos a página com o contador no servidor na
Internet, acontecem pequenos problemas. Por isso,
recomendamos que todas as suas páginas com
contadores fiquem na pasta "raiz" do seu site.
Estilo do contador - Na área inicial da figura acima, você escolhe um estilo para o seu contador. Se
você não gostar de nenhum dos modelos apresentados, você pode inserir outro estilo de contador, clicando
na opção "Figura personalizada" e fornecendo o endereço de um arquivo .GIF ou .JPG, que conterá os
dígitos de 0 a 9. Veja um exemplo de um arquivo com os dígitos que foi obtido no site "The Museum of
Counter Art" (http://www.counterart.com):
Esse contador só funcionará corretamente se todas as propriedades de função e de imagens

necessários a sua exposição estiverem devidamente alocados no provedor, e esteja baseado em tecnologia
compatíveis com as extensões do FrontPage ou ainda que as transferências de páginas para este servidor
sejam feitas através da função "Publicar" do FrontPage Explorer (Será visto posteriormente). Um exemplo
de que algo está faltando ou disposto em local errado, pode ser visto na figura abaixo:
No campo 2, podemos definir um novo número inicial para o contador. Se você quiser que o seu contador
comece a contar a partir do número "1000", é só colocar este número no campo correspondente.
Definindo a quantidade de dígitos
No campo 3, é definido o número mínimo de dígitos que será exibido no seu contador. Por exemplo, se este
campo tiver o valor 0 e o seu contador estiver no número 3, será exibido "3". Agora, se o campo tiver o valor
5, será exibido "00005".
- Agora veremos tudo o que você precisa saber para usar completamente os Botões.
Aqui não vamos fazer apenas botões que trocam de cor ao passar o mouse sobre eles, mas também
mostrar novas imagens e até sons! O botão não é nada mais do que um applet java, que foi incorporado
desde o FrontPage 98. A sua função principal é produzir botões mais sofisticados nas suas páginas. Que
mudam de cor, imagem e geram sons ao passar o mouse sobre eles.

Criando um Botão:
No menu Inserir, escolha a opção: Componentes e depois: Botão em foco. Aparecerá então a janela de
diálogo abaixo:
No campo Texto do botão (1), é colocado o texto que irá aparecer no botão. O estilo de letra deste
texto é determinado clicando no botão Fonte (6). No campo Vincular a (2) digite o endereço URL do link
deste hover. Se a página de destino estiver dentro do seu site, você pode selecioná-lo clicando no botão
Procurar (7).
O campo Cor do botão (3) determina a cor original do Botão. O campo Cor do plano de fundo (8)
define a cor de fundo do Botão. Este campo só é útil quando utilizarmos figuras - veja adiante. O efeito
especial no botão é escolhido no campo Efeito (4), e a cor deste efeito no campo Cor do efeito (9). Os
campos Largura (5) e Altura (10) determinam a largura e altura do botão (em pixels), respectivamente. O
botão Ok (11) Finaliza a configuração.
Opções Avançadas do Botão em foco:

Agora vamos nos aprofundar um pouco mais. Clicando no botão Personalizar (11), aparecerá uma nova
caixa de diálogo.
Com estas opções, poderemos fazer coisas muito mais interessantes do que já foi visto. Em primeiro lugar,
veremos como fazer Botão com sons. O campo Ao clicar (12) diz qual o arquivo de som que será tocado
quando o usuário clicar sobre o Botão. Neste campo digita-se o caminho do arquivo ou se este não estiver

no seu site, selecione-o através do botão Procurar ao lado. Aqui vale uma observação importantíssima: os
arquivos de sons utilizados aqui deverão ser do tipo AU, com amostragem de 8 KHz e mono.
O campo Ao focalizar (13) define o som que será tocado quando o cursor do mouse passar sobre o
hover. O procedimento para preencher este campo é igual ao anterior. Veja o exemplo abaixo:
Agora, é hora de ver como fazer para criar um Botão que mostre uma imagem customizada. O
campo Botão (14) diz qual será a figura original do arquivo.
Pode-se usar figuras .GIF ou .JPEG. O campo Ao focalizar (15) define qual a figura será mostrada ao
passar o cursor do mouse sobre o Botão. A cor de fundo é definida no campo Cor do plano de fundo (8).
Cuidados:
O grande cuidado com o uso dos Botões está na confirmação em que o seu site esteja os arquivos
fphover.class e fphoverx.class. Estes arquivos geralmente ficam numa sub-pasta do seu site chamada
_fpclass.
Outro cuidado é para que os arquivos de som e as imagens, sejam trazidas para dentro do seu
projeto. Use o botão Procurar ao lado dos campos, e aparecerá a seguinte janela:

Na área 1 aparecerá o conteúdo do seu site, onde você poderá navegar e selecionar o arquivo
desejado, se ele estiver lá. Se o arquivo estiver no seu computador e não dentro do seu projeto de site, você
deve usar o botão 3 e selecionar o arquivo do seu disco e trazê-lo para o site.
Depois disso, no momento em que você salvar a página, o FrontPage Editor irá perguntar em qual
local do site você irá copiar os arquivos selecionados. A partir daí, o Botão deverá funcionar.
Não coloque na área 2 endereços de caminhos para arquivos do disco do seu computador, tipo:
"c:\Imagens\teste.gif" – Dessa forma o Botão não encontrará o arquivo.
Adicionando botões em frame:
Complementando o nosso artigo sobre Botões, mostraremos agora como utiliza-los em páginas que usam
frames.
Vamos supor que você necessite criar uma ‘página’ composta por dois frames, ou melhor
esclarecendo: em uma única exibição no browser deverá ser mostrada duas áreas distintas e diferentes
entre si para a visualização de conteúdos de páginas diferentes em cada uma dessas partes. Uma
ocorrência grande esta no exemplo onde uma pagina exibe um menu, sendo exibida como uma pequena
faixa, suficiente apenas para conte-lo e todo o restante mudará exibindo cada pagina solicinada por esse
hiperlinks. Veja o exemplo abaixo:
No exemplo anterior mostramos um menu formado por Botões que quando acionado, qualquer dos
links define o que será exibido na grande área d fundo mais claro. Para definirmos onde será exibida a
pagina referente ao acionamento do hiperlink procedemos da seguinte forma: primeiro, abrimos a janela de
propriedades do Botão, clicando com o botão direito sobre ele, é esta a janela que aparece:

Como vimos anteriormente essa caixa vai permitir criar um variedade de efeitos e funções para o
botão. Neste momento, só nos interessa o botão Procurar (7). Que nos levara a caixa de diálogos para que
possamos criar o vinculo com a página devida. Clique nele e veremos então a janela para a seleção do
hiperlink referente ao clique sobre o Botão,
Esta janela é igual ao da seleção de um hyperlink já mostrada anteriormente. No campo (1) você
seleciona a página que será lincada para ser exibida ao clicar no botão. No campo (2) escolhemos o
Indicador relativo à posição da página destino que queremos exibir, se tiver algum. E no campo (3)
escolhemos como será exibida a nova pagina, que também já foi visto anteriormente.
Letreiro digital:
O "marquee" é um efeito do FrontPage que permite que você crie um texto que fica rolando na tela como
abaixo:
Texto do letreiro digital
Importante: Informamos que este componente só é visto corretamente no browser Internet Explorer ou
qualquer outro que trabalhe bem com aplicativos Java. Existem applets java disponíveis na Internet que
produzem efeitos semelhantes; o programa Anfy Team, visto anteriormente possui alguns muito
interessantes. Para colocar um "marquee" na sua página, vá ao menu Inserir / componentes – Letreiro
digital. Aparecerá a janela abaixo:

No campo Texto (1) inserimos o texto que queremos que apareça no nosso marquee. Em Direção
(2), escolhemos o sentido do movimento do texto: da direita para a esquerda ou da esquerda para a direita.
No campo Velocidade (3), especificamos em intervalos o tempo, em milisegundos, que o texto levará para
executar um movimento.
A quantidade de pixel que o texto correrá entre um movimento e outro, será especificada em:
Quantidade.
Na seção Comportamento (4); selecionamos o tipo de movimentação. Se selecionarmos Rolar o texto vai
até o outro lado e recomeça a correr do lado onde tudo começou.
Com a opção Deslizar, o texto vai até o outro lado e pára. Se optarmos pela opção Alternar, o texto vai até
o outro lado e volta no sentido contrário indefinidamente (como uma bola de "pingue-pongue"). A seção
Alinhar com texto (5) é usada quando temos um marquee na mesma linha de uma porção de texto.
Nesta seção, indicamos como será o alinhamento vertical do marquee em relação ao texto que está
na mesma linha.
Os valores que podem ser: texto alinhado na parte superior do marquee, texto alinhado no meio do
marquee ou texto alinhado na parte inferior do marquee.
A seção Tamanho (6) permite-nos especificar o tamanho do marquee altura e largura em pixels ou
porcentagem.
O marquee também pode ser redimensionado clicando-se nele e arrastando em um dos cantos
selecionados. Na seção Repetir (7) especificamos quantas vezes o texto será repetido no marquee.
Se a opção Continuo for selecionada, a repetição será infinita. Na seção Cor do plano de fundo (8), você
pode selecionar a cor de fundo do marquee.
Em Estilo você terá de fazer uma identificação do marquee, não é necessário configurar.
Se desejar alterar qualquer propriedade de texto (fonte, cor, tamanho, etc.), basta clicar no marquee e
selecionar qualquer comando para alterar a formatação de texto. Trate o texto do marquee como se fosse
um texto normal. Caso esteja inserindo o marquee em uma tabela, é possível efetuar, normalmente a
configuração de tabela.
Efeitos de HTML Dinâmico:

Esse é um recurso muito interessante que pode ser utilizado tanto para imagem quanto para texto
você verá que ele pode ser muito bom e criando efeitos que vão dar um toque especial realçando áreas do
seu site de forma especial.

Para acessa esse componente da barra de ferramentas padrão basta clicar sobre Formatar e depois sobre
a guia Efeitos de HTML dinâmico. Uma barra de ferramenta será colocada a sua disposição.
Para acionar um efeito basta selecionar a

imagem ou o texto e depois ir clicando nos
campos, escolhendo o efeito. Para facilitar o
trabalho no modo normal, você pode dixar o
efeito demarcado clicando em:
Figuras
Opção Efeito Função
Para esquerda
Para cima
Para o canto esquerdo inferior
Para o canto direito inferior
Sair Para o canto direito superior
Clicar Para o canto esquerdo superior
Para o canto direito superior, por palavra
Para o canto direito inferior, por palavra
Permutar figura Escolher figura

Para esquerda
Para cima
Clicar duas vezes Sair
Para o canto direito superior
Para o canto esquerdo superior
Passar o mouse Permutar figura Escolher figura

Carregar a página Palavra por palavra
Elástico
Surgir Da direita
Da parte inferior
Da esquerda
Da parte superior
Do canto esquerdo inferior
Do canto direito inferior

Do canto direito superior
Do canto esquerdo superior
Nos cantos
Do canto direito superior, por palavra
Do canto direito inferior, por palavra
saltar
Espiral
Onda
Da esquerda para direita
Emergir De cima para baixo
Do meio
Mais
Zoom
Menos
Textos
Opção Efeito Função
Para esquerda
Para cima
sair
Escolher fonte
Escolher borda
Clicar
Para esquerda
Para cima
Formatação
Escolher fonte
Formatação
Escolher borda
Escolher fonte
Passar o mouse Formatação
Escolher borda
Carregar página Da direita
Elástico
Da parte inferior
Surgir Da direita
Da parte inferior
Da esquerda
Da parte superior
Do canto esquerdo inferior
Do canto direito inferior
Do canto direito superior
Do canto esquerdo superior
Nos cantos
Do canto direito superior, por palavra
Do canto direito inferior, por palavra
saltar
Espiral
Onda
Da esquerda para direita
Emergir De cima para baixo
Do meio
Mais
Zoom
Menos
Formulários:
O formulário (forms) é uma boa forma de transmissão de informações e de obter algum retorno
(feedback) dos visitantes para o seu site.
Um formulário é composto de campos destinados a interatividade (form fields), que podem ser
apresentados nos formatos conforme demonstrados à seguir:
Parte Superior do formulário
Caixa de texto de uma linha.
Caixa de texto de rolagem.
Caixa de seleção.
Botão de opção.
Menu suspenso.
Botão de ação.
Parte inferior do formulário
O usuário preenche os campos de seu formulário e os envia para o servidor acionando, um botão,
geralmente chamado "Enviar".
Ao clicar neste botão, é acionada as propriedades do manipulador do formulário (forms handler) que
assume o controle. Este manipulador é que determina o que será feito com a informação digitada nos
campos dos formulários. Veja a seguir algumas operações possíveis que o manipulador pode realizar são
uma vez que solicitado na descrição de suas propriedades.
O manipulador de formulários pode:
enviar os dados para um arquivo texto no servidor web. METHOD="GET" ACTION="http://www.cr-
df.rnp.br/cgi-bin/post-query"
enviar os dados para uma conta de e-mail. METHOD="POST" ACTION="mailto:user@domain"
enviar os dados para um componente CGI, ASP, etc. que podem, a partir da recepção dos dados, realizar
várias operações com os mesmos, inclusos para um banco de dados. ACTION="/cgi-bin/post-query"

Criando um Formulário:
Faremos agora um formulário simples de cadastro de dados pessoais.
Primeiro, crie uma nova página no seu FrontPage Editor, e para inserir o primeiro campo do seu formulário,
vá ao menu Inserir / Formulário, e escolha o elemento Caixa de texto de uma linha.
Aparecerá algo como a figura acima. Quando você insere o primeiro objeto de um formulário,
também são inseridos automaticamente os elementos 1, 2 e 3 do gráfico acima. A área de linha tracejada 1
representa a área de inserção dos dados do formulário.
Todos os campos do formulário deverão estar dentro dessa área. O botão nº 2 envia os dados para
o manipulador do formulário. O botão nº 3 retorna o valor de todos os campos para o seu estado original ou
inicio do campo do formulário.
Caixa de texto de uma linha:

O elemento da figura anterior, Caixa de texto de uma linha, permite que você escreva dados em
uma linha continuamente. Para alterar as propriedades deste campo, clique com o botão direito do mouse
sobre ele e escolha a opção Propriedades do campo de formulário. Aparecerá a seguinte janela:
No campo 1, você irá definir o nome para este campo, este nome é muito importante para o
manipulador do formulário. Tente sempre colocar nomes significativos para ele. No nosso exemplo vamos
alterá-lo para "nome". O campo 2, define um valor inicial para o campo. Este valor já é mostrado quando o
formulário é exibido.
Podemos também condicionar o número de caracteres, possíveis de serem digitados neste campo
utilizando a opção 3. Se o campo for para digitar uma senha, não queremos que esta senha seja exibida.
Se você definiu a opção 4 como "Sim", tudo o que você digitar no campo será substituído por um asterisco
na visualização. O campo 5 define a ordem de tabulação do campo. Isto serve para quando houver vários
campos no formulário e fizer a navegação entre eles usando a tecla "Tab", será seguida a ordem indicada
pelo número neste campo. Clicando no botão 6 verá a seguinte janela:

O campo 1 você digita o titulo, a requisição da informação desejada no campo. No campo 2. você
deve informar se haverá alguma restrição relacionada com o tipo de informação a ser inserido no campo do
formulário. As opções possíveis são:
sem restrição
serão aceitos caracteres de letras
serão aceitos números inteiros
serão aceitos números inteiros e decimais
Dependendo da opção que você escolher, serão habilitadas as áreas 1, 3 e 4. Se você escolheu a
opção Texto no campo 2, poderemos utilizar as cláusulas de validação na área 3. Nela poderemos definir
que tipos de caracteres serão aceitos pelo campo do formulário. Se você marcar a opção "Letras",
habilitamos o
campo a aceitar apenas letras. Com a opção "Digitos", é a mesma coisa, mas para os dígitos de "0" a "9". A
opção "espaço em branco" permite a inserção de caracteres que contenham espaço em branco, como
"Enter", barra de espaço e "tab". Se quisermos inserir outros tipos de caracteres que não sejam os
especificados anteriormente, utilizamos a opção "Outro" e digitamos os caracteres que queremos que sejam
aceitos pelo campo, por exemplo: $,%,&, etc. Podemos selecionar mais de uma opção para obter
combinações do tipo: Sem restrições.
Quando escolhemos a opção Números inteiros no campo 2, uma parte da área 4 é habilitada
("Agrupamento"). Nesta parte, escolhemos qual é o caractere que será aceito pelo campo como separador
de milhares; que poderá ser: ponto, vírgula ou nenhum caractere será aceito como separador.
Se no campo 2 selecionarmos a opção Numero, a outra parte da área 4 (Decimal) também será habilitada.
Aqui define-se qual será o caractere separador da parte inteira e decimal do número conforme à opção
anterior.
O campo 1 é habilitado quando você escolhe no campo 2 os valores Número Inteiro ou Numero.
Quando ocorre um erro de validação no campo do formulário, a mensagem de erro identifica o nome do
campo pelo seu nome interno (aquele que você vê quando edita as propriedades do campo).
Geralmente, este nome não corresponde ao texto que identifica o campo no formulário. Digite no
campo Nome de exibição o nome que você quer que apareça na mensagem de erro.

Na área 5, a opção "Comprimento de dados" informa se é obrigatório o preenchimento do campo ou não.
Se ela estiver ativada, o campo deve ser preenchido com algum valor, senão aparecerá uma mensagem de
erro.
Os campos "Comprimento mínimo" e " Comprimento máximo" definem, respectivamente, o número
mínimo e máximo de caracteres que são aceitos no campo do formulário.
Na área 6 podemos definir uma faixa de limites para os valores entrados no campo do formulário.
Se nós quisermos, por exemplo, que sejam aceitos no campo apenas números entre 10 e 20, inclusive,
deveremos acionar a opção: "o campo deve ser..." e na opção seguinte escolhemos: maior ou igual a... e
no próximo campo colocamos o valor 10. Definimos então a seguinte regra de validação:
o campo deve ser maior ou igual a 10
Agora devemos fazer a outra regra. Clique na opção "e deve ser..." e na opção seguinte escolha
"menor ou igual a" e no próximo campo inclua o valor 20. Fizemos agora a seguinte regra:
o campo deve ser menor ou igual a 20
Juntando as duas condições, atendemos às nossas necessidades de validação. As opções de comparação
que você pode incluir são:
Significado Menor ou igual a

Diferente de Maior ou igual a
Menor que Igual a
Maior que
Inserindo texto no formulário:

Agora, temos que inserir um texto antes do campo que nós criamos para indicar que nele temos que
colocar um nome de usuário. Posicione o cursor de texto no começo da linha onde está o campo e digite o
texto "Nome:". Agora nosso formulário ficaria assim:
Inserindo mais um campo no formulário:

Continuando nosso formulário de cadastro, devemos inserir um campo para que o usuário escolha o
sexo dele. Mas primeiro, vamos colocar o cursor de texto na posição correta de inserção: posicione o cursor
de texto entre o campo do formulário e o botão "Submeter” e tecle “Enter”. Será criada mais uma linha
dentro do formulário e podemos digitar o texto “Sexo:”
Inserindo uma Caixa de texto ou seleção:

Com o cursor de texto posicionado logo após "Sexo:", vá até o menu: "Inserir – Formulário - Caixa
de texto de uma linha ". Aparecerá nossa primeira opção de caixa de texto. Usando os passos vistos
anteriormente, insira um Botão de opção depois digite "Masculino" de "Enter" insira outro Botão de opção e
digite "Feminino". Agora teremos o seguinte aspecto no nosso formulário:
Os campos de opções são organizados em grupos de opções. Quando você coloca vários seguidos,
o FrontPage automaticamente os coloca no mesmo grupo. No nosso exemplo, os campos referentes ao
sexo masculino e feminino fazem parte de um mesmo grupo, e será aceito apenas que um campo esteja
ativado no momento. Faça uma visualização no formulário e experimente.

Para ver as propriedades de um campo de seleção qualquer, clique com o botão direito do mouse
sobre ele e escolha a opção "Propriedades do campo do formulário". Faça isso no campo à esquerda de
"Masculino". Aparecerá a seguinte janela:
O campo 1 determina o nome do grupo do campo. Ele deve ser o mesmo para todos os campos
que fazem parte do grupo de opções. Vamos mudá-lo para "Sexo". Faça a mesma coisa no campo de
formulário referente à "Feminino". No campo 2, é definido o valor que será atribuído ao grupo quando
aquele campo do formulário tiver sido selecionado. Para o campo antes de "Masculino", atribua o valor "M".
E para o campo "Feminino", atribua o valor "F". A área 3 você deverá dizer se o campo já deverá estar ou
não selecionado. Vamos colocar a opção "Selecionado" para o campo "Masculino". No botão 4, definimos
as regras de validação do campo. Clique nele e aparecerá a janela a seguir.
No campo 2, definimos se o preenchimento do grupo é obrigatório ou não. Como na maioria das

vezes já temos sempre um valor inicial definido, geralmente essa opção não é habilitada. Mas se for, o
campo 1 é ativado, onde podemos colocar o nome do campo para as mensagens de erro, de maneira
semelhante ao campo visto nas propriedades de validação do elemento "Caixa de texto de uma linha".
Inserindo uma caixa de seleção:

Na linha seguinte do nosso formulário de exemplo. Vamos no menu: "Inserir – Formulário - Caixa de
seleção " e a seguir digite "Quero receber as novidades deste site" e "Enter". Agora temos uma opção para
o usuário decidir se quer ou não receber um informativo, bastando clicar na caixa que está à esquerda da
frase.
Usando o botão direito do mouse sobre o caixa de seleção, escolhemos a opção "Propriedades do
campo do formulário" para ver as propriedades deste campo.

O campo 1 é o nome do campo. Vamos mudá-lo para "Novidades". No campo 2, é definido o valor
que será atribuído ao campo quando ele for acionado. Vamos mudá-lo para "SIM". A área 3 diz se o estado
inicial do campo deverá ser selecionado.
Inserindo um Menu suspenso:
Digite no nosso formulário de exemplo "Estado:" e depois vá no menu: " Inserir – Formulário – Menu
suspenso". Veja como ficou nosso formulário.
Depois clique com o botão direito do mouse sobre o campo e escolha a "Propriedades do campo do
formulário", para abrir a janela abaixo.

No campo 1, onde se define o nome do campo, daremos o nome de "Estado". No campo 2, é onde estarão
as opções do nosso menu. Para inserir uma nova opção clique no botão 3 - "Adicionar". Aparecerá a janela
abaixo:
Nesta nova janela, você digita no campo 1 a opção que irá aparecer no menu de opções. No nosso
exemplo, para a lista de estados, podemos digitar "AC". No campo 2, definimos se esta opção terá um valor
interno, diferente do texto que aparece no menu. Por exemplo, suponhamos que internamente, eu tenha
que mandar a informação "1" em vez de "AC", para processamento em um banco de dados. Se for este o
caso, habilita-se este campo e preenche o valor interno no campo 3.
No campo 4 dizemos se esta opção do menu será a opção inicial . No nosso exercício, não
usaremos os campos 3 e 4. Agora, como tarefa, você pode inserir vários outros estados no nosso menu.
Depois disso, teríamos em nosso menu algo parecido como:

Para editar uma das entradas do menu, clique sobre a entrada desejada no campo 2 e selecione o
botão 4 (Modificar). Na janela que você já viu antes, faça as alterações necessárias. Para remover uma
entrada, clique sobre ela no campo 2 e depois clique no botão 5 (Remover). Se você quiser alterar a ordem
das entradas do menu, usamos os botões 6 e 7. Por exemplo, se quiser colocar a entrada "BA" do nosso
menu como primeira opção, clica-se sobre ela no campo 2 e depois clicamos várias vezes o botão 6 (Move
para cima) até que a entrada esteja na posição desejada. O campo 8 define a altura da lista de opções, e é
dada em linhas. No campo 9, dizemos se o usuário pode selecionar ou não mais de um item.
O campo 10 é sobre a validação do campo do formulário. Vamos clicar nele e teremos a seguinte
janela:
Nesta janela, o campo 2 define se o campo é de preenchimento obrigatório ou não, e o campo 3

desabilita o primeiro item da lista. Este campo é usado muito na seguinte situação: geralmente no primeiro
item do menu coloca-se uma informação instruindo o usuário, tipo "Selecione um estado", e por isso ele não
pode ser uma entrada válida no menu. Aí usamos o campo 3. O campo 1 é semelhante ao que vimos nos
outros campos do formulário e só é habilitado quando selecionar o campo 2 ou 3. Ele define o nome do
campo que será exibido na mensagem de erro.
Inserindo um Caixa de texto de rolagem:

Agora, iremos inserir no nosso exemplo um campo onde o usuário possa colocar as suas
sugestões. Insira uma nova linha no seu exemplo e digite "Deixe aqui a sua opinião ou sugestão:". Insira
mais uma linha e vá ao menu "Inserir – Formulário - Caixa de texto de rolagem". Agora temos um local para
as sugestões.

Clique no "Caixa de texto de rolagem" com o botão direito e escolha a opção "Propriedades do
campo do formulário".
No campo 1 daremos o nome do campo como "Opinião". No campo 2, define-se um valor inicial
para o campo. No campo 3 e 4, definimos o comprimento e a altura de exibição do campo, respectivamente.
Clicando no botão 5 (Validar) iremos para as regras de validação do campo do formulário, que é a mesma
janela vista na "Caixa de texto de uma linha".
Trabalhando com os botões no formulário:

Os botões são responsáveis, principalmente, pelo envio das informações ao manipulador do formulário.
Para editar as propriedades do botão, clique com o botão direito do mouse sobre ele e escolha a opção
"Propriedades do campo do formulário". Faça isso com o botão "Submeter" do nosso exemplo.
No campo 1, definimos o nome interno para o botão. O campo 2 é o texto que será mostrado sobre
o botão. Vamos mudá-lo para "Enviar". No campo 3, definimos a ação que será tomada quando este botão
for pressionado. Se for "Normal", será um botão normal, onde você terá que assinalar um script a ele para
fazer alguma ação.

No caso da opção "Submeter"; os dados do formulário serão enviados para o manipulador do
formulário. A opção "Reset" irá fazer com que todos os campos do formulário voltem ao seu estado original.
Quando você cria um formulário no FrontPage, dois botões do tipo "Submeter" e "Redefinir" são
automaticamente inseridos no formulário junto com o primeiro elemento. No nosso exemplo, aproveite para
mudar o texto do botão "Redefinir" para "Limpar Campos".
Enviando os dados do formulário:

Depois de criar os campos do formulário, precisamos saber o que fazer com eles. Estes dados são
tratados por um manipulador de formulários. Clique com o botão direito do mouse em qualquer área do seu
formulário, e escolha a opção "Propriedades do campo do formulário".
No campo 1, especificamos se vamos enviar os dados preenchidos no formulário para um arquivo

e/ou endereço de e-mail. Se for mandar para um arquivo, especifique o caminho dele no campo 3. Por
padrão, o FrontPage envia para um arquivo dentro da pasta "_private", mas você pode especificar qualquer
outro arquivo. Se o arquivo estiver dentro do seu site, você pode selecioná-lo também através do botão 4
(Procurar).
Se você quiser enviar os dados do formulário para um endereço de e-mail, digite-o no campo 5.
Agora, muita atenção! Sempre que você definir este campo aparecerá depois uma mensagem
dizendo que as extensões do FrontPage no seu servidor não estão configuradas para o envio de e-mails.
Se você estiver usando o FP com o FrontPage Web Server, isto é verdade. O que importa é se, no servidor
onde a página irá ficar hospedada definitivamente, existem as extensões do FrontPage e estão configuradas
corretamente. Na dúvida, contate o administrador do servidor de hospedagem. No caso de estar tudo
correto no servidor final, então vamos ignorar a mensagem mostrada e escolha "Não" quando o FP
perguntar se você deseja remover o endereço de e-mail.
No caso de você ser o administrador do servidor, pode-se encontrar como configurar as extensões
no CD do FrontPage.
Habilitando o campo 2, podemos enviar os dados para um script ASP, CGI, etc, que pode realizar
ações específicas com eles, inclusive uma integração com um banco de dados. Isso é decidido no campo 6.
Neste campo, também se pode mandar os resultados para um "Manipulador do formulário de registro" ou
um "Manipulador de formulário de discussão", ambos componentes do FrontPage *(Arquivo - Novo –
Página)*.
Como estes componentes não fazem parte do nosso escopo, iremos tratá-los em outras
oportunidades. Depois que você selecionar para onde irão os seus dados, clique o botão 7 (Opções) para
configurar o manipulador de formulário que será utilizado. Veremos estas opções com mais detalhes mais
adiante.
No campo 8, definimos um identificador para o nosso formulário. Este nome pode ser útil no caso de
usarmos outros manipuladores de formulários (como os definidos no campo 2).
No campo 9, dizemos qual é o frame da janela onde será mostrado o resultado do envio dos dados.

No botão 10 (Avançadas), poderemos especificar alguns valores ocultos para um manipulador de
formulário visualizado. Isso é mais usado quando, por exemplo, temos um único manipulador para vários
formulários.
Podemos então, especificar um identificador em um campo oculto, que tenha um valor diferente
para cada formulário. Desta maneira, o manipulador saberá de onde os dados vieram.
Opções do manipulador do formulário:

Quando você clica no botão 7 (Options), aparece a janela:
A primeira parte desta janela (Resultados pelo correio eletrônico) deve ser usada quando você
definir que os dados do formulário vão para um arquivo no seu site. O campo 1 já vem com o nome de
arquivo que você definiu no campo 3 da janela anterior. No campo 2, deve-se escolher o formato como será
gravado o arquivo. As opções são:
Descrição
Arquivo em formato HTML, com títulos dos campos em negrito. É o

valor padrão para o manipulador de formulário de registro (Registration
Form)
Arquivo HTML usando uma lista de definição
Arquivo HTML usando uma lista com bullets
Arquivo HTML usando texto com formatação
Texto normal com formatação
Texto com vírgula separando os valores. É o formato padrão para o
manipulador de formulários
Texto com marcas de tabulação (tab) separando os valores
Texto com espaço separando os valores
Os três últimos valores da tabela acima são os mais indicados para realizar uma importação de um
banco de dados. Com o campo 3 ativado, também serão incluídos no arquivo os nomes dos campos. O
campo 4 vale para a gravação em arquivos HTML. Com ele ativado, os dados mais recentes estarão
sempre incluídos no final do arquivo.
Este valor é padrão para os arquivos no formato texto e não pode ser modificado. A área 5 define os
mesmos parâmetros vistos acima para um segundo arquivo (opcional).
Ele é útil no caso, por exemplo, de você preparar um arquivo formatado para ter os dados inseridos
numa planilha ou banco de dados, e um outro arquivo de formato texto para permitir a sua visualização.
Se você for utilizar o envio das respostas do seu formulário para um e-mail, deverá usar a parte
"Resultados pelo correio eletrônico" das opções do formulário. No campo 1, deve-se inserir o endereço de
e-mail para o qual serão enviados os dados. No campo 2 especificamos o formato do e-mail.
As opções para este campo são as mesmas vistas no campo "Texto Formatado" na área
"Resultados do arquivo". No campo 3 dizemos se serão incluídos ou não os nomes dos campos no e-mail.
A parte do cabeçalho do e-mail contém os campos 4 a 7. O campo 4 especifica se você irá colocar
como assunto do seu e-mail o resultado de um campo do seu formulário ou não.
Se você acionar este campo, digite o nome do campo do formulário no campo 5. Senão, você pode
digitar o texto de sua escolha para o assunto do e-mail neste campo. Os campos 6 e 7 são semelhantes aos
vistos anteriormente e servem para mandar uma cópia do e-mail para um segundo endereço.
A área "Página de confirmação" permite-nos definir uma página de confirmação e/ou falha para ser
exibida depois dos dados do formulário serem enviados.
No campo 1 você pode definir um endereço de uma página que será sempre exibida quando os dados do
formulário forem enviados com sucesso. E no campo 2 definimos a página que será exibida quando uma
das regras de validação dos campos do formulário, for violado.
As duas páginas são opcionais e, se não forem definidas aqui, serão usadas páginas padrão.
A última área das opções do formulário trata sobre as informações que serão salvas no arquivo ou
e-mail. No campo 1 defina quais os campos do formulário que serão salvos. E nos outros campos, podemos
guardar informações adicionais sobre o usuário, como hora(2), data(3), nome do computador(4), nome do
usuário(5) e tipo do browser usado(6).
Criar uma página de confirmação e atribuí-la a um formulário:

Em vez de usar a página de confirmação padrão, você pode criar a sua própria. Primeiramente, crie
uma nova página em sua Web e, em seguida, defina-a como a página de confirmação para o formulário.
Você pode exibir o conteúdo dos campos de formulário na página de confirmação. O visitante do
site pode confirmar se as informações foram digitadas corretamente e, se necessário, pode retornar ao
formulário e preenchê-lo novamente. Você também pode personalizar a página de confirmação; por
exemplo, se você solicitar o nome do visitante do site no formulário, poderá exibi-lo na página de
confirmação:
Prezado João Gomes,

Obrigado por preencher este formulário.
No modo de exibição Página, clique no botão Nova página .
Na página, digite o texto que deseja exibir após um visitante do site ter enviado o formulário.
Retornando informações ao visitante a partir de um campo de formulário:

Coloque o cursor onde deseja exibir o texto. Por exemplo, você pode exibir o conteúdo de um
campo de endereço eletrônico, permitindo que o visitante do site confirme se ele foi digitado corretamente.
No menu Inserir, aponte para Componente e em seguida, clique em Campo de confirmação. Na
caixa Nome do campo de formulário a ser confirmado, digite o nome do campo no qual as informações
serão exibidas e, em seguida, clique em OK. O nome do campo é exibido entre colchetes no formulário.
Quando o formulário de confirmação for exibido para o visitante do site, este campo exibirá a entrada do
visitante do site.
Repita esta etapa para cada campo que deseja exibir.

Clique em Salvar .
Digite o URL e o título da página e, em seguida, clique em Salvar.
Para atribuir a página de confirmação ao formulário, abra a página que contém o formulário clicando duas
vezes no arquivo na lista de pastas.
Clique com o botão direito do mouse no formulário e, em seguida, clique em Propriedades do formulário no
menu de atalho.
Clique em Opções e, em seguida, clique na guia Página de confirmação.
Na caixa URL da página de confirmação, digite o nome e o local da página de confirmação recém-criada ou
clique em Procurar para localizá-la.
Você pode usar o modelo de página do formulário de confirmação para criar a sua página de
confirmação, basta alterar e personaliza-lo. Esse elemento vai trazer segurança ao usuário de sua página,
que envia um formulário; pois tem, com o uso desse artifício, uma resposta imediata, que confirme que o
formulário foi enviado com sucesso e que suas solicitações estarão sendo providenciadas. Para testar o
formulário, visualize-o no navegador da Web clicando em Visualizar no navegador.
Como vimos, existem plenas condições de preparar a sua interatividade através de formulários no
seu FrontPage. Tudo vai depender de você fazer uso completo de programa utilizando sempre o Publicar.
Mas caso não esteja utilizando esse recurso, ainda é possível o envio do seu formulário através do seu site;
mas para tanto, será necessário o auxilio do seu provedor; veja a baixo o serviço disponível junto aoTerra,
para esse tipo de suporte.
Formmail:
Para que o formmail.pl possa ser usado em seu site web, é preciso seguir alguns passos. A página
em que o usuário entrará com as informações deve possuir um formulário declarado da seguinte maneira:
<form method=post action="http://info14.terraempresas.com.br/cgi-bin/formmail.pl">

OBS: info14.terraempresas é um possível DNS Master de hospedagem no provedor terra.
O formulário deve conter informações que orientem o script:
O endereço de e-mail para onde os dados entrados pelo usuário serão enviados (destination);
O assunto da mensagem que levará esses dados do usuário (subject);
A URL da página que o usuário receberá como resposta ao submeter suas informações (feedback);
O endereço de e-mail do usuário como remetente dessa mensagem (email);
Essas informações são passadas para o script através de campos "hidden" na página, exceto o
campo email, que é fornecido pelo usuário. Veja o exemplo a seguir:
<input type="hidden" name="destination" value="xyz@domxyz.com.br">

<input type="hidden" name="subject" value="Formulário preenchido">
<input type="hidden" name="feedback"value="http://www.domxyz.com.br/resposta.htm">
<input type="text" name="email">
Observe que os nomes (destination, subject, feedback, email) não podem ser alterados, senão o
formulário não irá funcionar. As possíveis modificações na sua maioria estarão antecedidos das descrições
“name” ou “value” (nome e valor respectivamente).
Quando este formulário for preenchido por um usuário, será enviada uma mensagem para o
endereço webmaster@minhaempresa.com.br com o assunto "Mais um formulário preenchido", contendo
todos os dados do formulário. O endereço de origem da mensagem será o que for digitado pelo usuário no
campo "email".
Após clicar em "enviar", o usuário verá como resposta a página contida em
http://www.minhaempresa.com.br/resposta.htm.
Um mesmo site pode possuir múltiplas páginas com formulários diferentes referenciando o script
formmail.pl; não há necessidade de identificá-los diferentemente de nenhuma forma.
Aspmail:
ASPMAIL é um componente que permite que você envie emails diretamente da página web
utilizando o protocolo SMTP.
As principais características do ASPMAIL são:

Suporta Múltiplos arquivos atachados PGP
Possibilita enviar e-mail definindo prioridades.
Possibilita configurar servidor de SMTP secundário ( redundância )
Implementando o ASPMAIL em seu site:

' Cria o componente aspmail
Set Mailer = Server.CreateObject("SMTPsvg.Mailer")
' Nome do Remetente
Mailer.FromName = "Empresa S/A"
' E-mail do Rementente
Mailer.FromAddress= "webmaster@minhaempresa.com.br"
' Servidor de envio de e-mail
Mailer.RemoteHost = "mail.terraempresas.com.br"
' Nome / Endereço de quem receberá o E-mail
Mailer.AddRecipient "Cliente", "xyz@domxyz.com.br"
' Assunto do E-mail
Mailer.Subject = "ASPMAIL !!!"
' Campo da mensagem
Mailer.BodyText = "Testando o ASPMAIL"
if Mailer.SendMail then
Response.Write "E-mail enviado"
else
Response.Write "Erro no envio do e-mail. Erro: " & Mailer.Response
end if
Obs.: Mais informações podem ser encontradas em http://www.serverobjects.com
Jmail:
É um componente de envio de e-mail para servidores em ambiente windows. Esse componente de

envio de email é muitousado por desenvolvedores no mundo (info do fabricante) e pode ser utilizado
livremente para testes.. Um dos grandes diferenciais do JMAIL frente ao CDONTS é a utilização de
qualquer servidor de email (SMTP) sem necessariamente ser do próprio servidor de WEB, você pode
executar um Script em uma página ASP em um servidor utilizando um SMTP gratuito por exemplo.
Principais características:
Permite o envio de mensagens para mais de um e-mail
Permite envio de arquivos atachados
Permite que seja usado qualquer servidor externo para envio
Permite envio de e-mail em HTML
Exemplo de código:
<html>
<body>
<%
' Cria Objeto JMAIL
set msg = Server.CreateOBject( "JMail.Message" )
' Email do Remetente, é necessário ser um endereço válido

msg.From = "emailsite@meusite.com.br"
msg.FromName = "Webmaster"
' Email e nome do Destinatário. Pode ser especificado mais de um Email.
msg.AddRecipient "webmaster@meusite.com.br", "Webmaster"
msg.AddRecipient "cliente@dominiocliente.com.br"
' Assunto da Mensagem

msg.Subject = "Assunto"
' Corpo da Mensagem.

msg.Body = "Teste de E-mail"
if not msg.Send("mail.terraempresas.com.br" ) then

Response.write "<pre>" & msg.log & "</pre>"
else

Response.write "Mensagem enviada com sucesso !"
end if
%>
</body>
</html>
CDONTS:
Cdonts é um componente da Microsoft utilizado para o envio de e-mails, através do asp. Por ter
uma sintaxe bem simples e por já vir incluído no IIS, ele é um dos componentes de e-mail mais utilizado no
mundo.
Exemplo de código em CDONTS usando HTML:

<% Dim wemail
Dim HTML
Set wemail = CreateObject("CDONTS.NewMail")
HTML = "<!DOCTYPE HTML PUBLIC""-//IETF//DTD HTML//EN"">"
HTML = HTML & "<html>"
HTML = HTML & "<head>"
HTML = HTML & "<title>Enviando CDONTS Email Using HTML</title>"
HTML = HTML & "</head>"
HTML = HTML & "<body bgcolor=""FFFFFF"">"
HTML = HTML & "<p><font size =""3"" face=""Arial""><strong>"
HTML = HTML & "Nome Qualquer</strong><br>"
HTML = HTML & "Preenchido por um Cliente</strong></p>"
HTML = HTML & "<p align = ""center"">Texto Texto Texto</p>"
HTML = HTML & "</body>"
HTML = HTML & "</html>"
wemail.From= "emailsite@dominioxyx.com.br"
wemail.To="webmaster@dominioxyx.com.br"
wemail.Subject="Formulário preenchido"
wemail.BodyFormat=0
wemail.MailFormat=0
wemail.Body=HTML
wemail.attachFile "Caminho do Arquivo","Nome do Arquivo"
wemail.Send
set wemail=nothing
%>

Busca interna no site:
Um dos componentes exclusivos do FrontPage é a página de busca interna. Ela é usada sempre
que queremos encontrar, dentro do nosso site, alguma página que contenha determinada palavra ou
conjunto de palavras.
Importante: este componente só funciona corretamente em servidores que possuam as extensões
do FrontPage instaladas. E ainda, para facilitar a interpretação do seu programa deve ser utilizado as
ferramentas de transferências de páginas com a função "Publicar" do FrontPage Explorer.
Para criar uma página de busca, vá ao seu FrontPage e no menu "Arquivo", escolha a opção
"Novo". Na caixa de diálogo com as opções de páginas que aparecerem, escolha Página de pesquisa,
conforme a figura abaixo:
Aparecerá então uma página de busca padrão. Esta página pode ser alterada conforme a sua
necessidade. A página padrão é dividida em duas partes: a primeira, é o formulário de procura propriamente
dito, e a segunda é uma explicação de como realizar as consultas.
Veja na figura abaixo o formulário de buscas:
O formulário que existe na página de busca tem várias diferenças do formulário padrão do
FrontPage. Para editá-lo, clique com o botão direito do mouse sobre a área do formulário e escolha a opção
Propriedades do formulário de pesquisa. A janela de diálogo a seguir será mostrada:

No campo 1 (Rótulo para entrada de dados), você altera o texto que aparecerá na frente do campo
de entrada de dados do formulário de busca. Mude; por exemplo, o valor deste campo para "Buscar a
palavra".
No campo 2 (Largura em Caracteres), determine o tamanho do campo de busca, em caracteres.
No campo 3 (Rótulo do botão iniciar pesquisa) você pode definir o texto que aparecerá no botão
que irá iniciar a busca. Você pode alterá-lo para "Buscar agora".
No campo 4 (Rótulo do botão limpar) define o texto que estará sobre o botão que limpa o campo.
Altere-o para "Limpar todos os campo".
Editando os resultados da pesquisa:

Na mesma caixa de diálogo, clique sobre a guia Resultados da pesquisas (número 5 na figura acima).
Veremos o seguinte:

No campo 1 Lista de palavras a pesquisar, mantenha a opção Todas. Isto quer dizer que a procura
será feita em todas as páginas do site menos nas pastas escondidas. Aquelas pastas do seu site que
começam com o símbolo under line "_": Por padrão, não podem ser vistas pelo browser.
Qualquer outro valor para este campo só é válido para o componente de listas de discussão. Nos
campos 2 a 4 escolheremos quais informações serão mostradas na página de resultado, além dos
endereços das páginas onde o texto pesquisado foi encontrado.
No campo 2, selecionamos o Grau de correspondência, que é a porcentagem de acerto do texto
pesquisado na página. No campo 3, será mostrada a data da última alteração da página, e no campo 4, o
tamanho em KBytes da página.
Tutorial básico para animação GIF no flash 5 BR.

Esse software não é o alvo do nosso curso, mas foi incluído aqui mais devido a curiosidade dos
nossos alunos do que realmente sua necessidade na edição de páginas, o modismo contou bastante dessa
forma vamos dar uma prévia, possibilitando a confecção de Gifs animado.
O Flash é um software pioneiro na criação de animações, dimensionáveis e interativas para a Web.
Se você desejar criar logotipos, banners, controle de navegação e sliders para sua Web, esse sem dúvida é
um excelente recurso. Com ele você pode criar, também, desde simples Gifs animados, até sites inteiros
totalmente interativos. A sua maior desvantagem está na carga e / ou demora em abrir além da
necessidade de Plug-ins para a sua total execução. É por esse motivo que indicamos o Flash apenas como
uma ferramenta na criação como apoio a composição geral dos Sites.
Uma coisa legal no Flash é que ele possui, internamente um curso completo para a maioria dos
seus efeitos especiais. Entrando em ajuda, o programa vai lhe proporcionar o conhecimento em vários
desses recursos; abrindo ainda, a opção de efetuar uma aula totalmente interativa; passo a passo. Não é
apenas aquele tutorial padrão com o qual se está acostumado; estando ainda, na maioria dos casos, em
outro idioma; independente de sua plataforma. Todo o conjunto funciona da seguinte forma: Você deve
fazer todas as aulas e depois entrar no tutorial. A proposta é que, com isso você será capaz de criar filmes
interativos para Sites Webs. Veja a seguir a imagem inicial que você tem do tutorial do Flash:
Ao abrir o programa, automaticamente ele apresenta na tela a maioria de suas ferramentas

causando um, quase trauma ao usuário. A intenção é que você comece a lidar com elas o quanto antes.
Basta fechar todas as caixas de diálogos, deixando somente as barras de ferramentas que voce irá usar.

Dessa forma teremos a seguinte imagem:
Para criar um filme (independe qual a forma de visualização a ser feita: se filme Flash, se Gif
animado o se Imagem HTML) será preciso:
Optar por uma Cena Varias camadas que funcionarão como Um desenho que pode ser
devidamente identificada níveis, de um conjunto de desenhos e cada implementado de algum efeito
que vai conter: camada conterá: especial ou movimento.
Vamos descrever uma situação para fixar o gráfico anterior:

Imaginemos a seguinte situação:
A sena 1 é formada pela imagem de um por do sol a beira mar.
• Na camada 1 teremos uma seqüência formada por uma paisagem que vai escurecendo.
• Na camada 2 temos a seqüência formada pelo movimento do sol no horizonte.
• Na camada 3 teremos a seqüência formada pelo movimento de sombras e nuvens.
• Na camada 4 teremos alguns sons característicos.
A sena 2, no escuro total; houve-se passos, tiros murmurinho e a imagem de um fósforo que
acende uma vela que conseqüentemente ilumina um corpo coberto no chão.
Na camada 5 o mesmo fundo escurecido da camada 4.

Na camada 6 temos a seqüência de sons.
Na camada 7 temos a movimentação do fósforo e da vela.
Na camada 8 temos ao corpo que recebe uma iluminação gradativa com de acordo com a movimentação da
camada 7.
A sena 3 pode ser uma mensagem contra a violência, escrita em um quadro na cor vermelho e que
desaparece com um escorrimento.
Na camada 9 temos o fundo com o quadro com a paisagem.

Na camada 10 o texto.
Na camada 11 fazemos escorrer.
Na camada 12 podemos dar um fundo musical.
Feito o filme você vai definir que tipo de apresentação gostaria de ter. A partir da guia Arquivo /
Configurar publicação , então terá a cesso a caixa de diálogos abaixo.
Definido a forma de apresentação e efetuada a configuração necessária basta clicar em publicar.

Não se preocupe com isso por enquanto, pois será visto posteriormente.
Já que temos, como base o projeto acima, vamos discuti-lo: Se transforma-lo em uma Imagem Gif
e configurado como animado, a sena se repetirá indefinidamente; (se assim for configurado) porém levará
muito tempo para carregar e iniciar a exposição.
Para confeccionar o nosso Gif animado vamos precisar de um jogo de imagens, no mesmo padrão
com as alterações que se pretende obter. Elas devem ser na mesma posição, de mesmo tamanho e com
peso similar.
Agora vamos abrir o Flash;

Primeiro: vamos dimensionar o filme no tamanho desejado.

• Na guia Unidade de régua. Vamos modificar para Centímetros;
• Na guia Dimensões. Vamos alterar para o tamanho da nossa figura;
• Na base inferior modifique o zoom para 100% ou mostrar tudo;
Agora, vamos iniciar o nosso filme:
• Clique com o lado direito do mouse sobre o primeiro quadro selecionando-o;

• no menu desdobrado; escolha: Inserir quadro chave.
Agora, vá até o menu principal na guia arquivo e selecione a guia Importar; na caixa de diálogos
navegue até a primeira figura, selecione a primeira e clique em abrir.
Caso as imagens estejam bem parecidas, com um nome seqüenciado você receberá um aviso do
programa conforme segue:

Se você aceitar (Sim) tudo será feito automaticamente, mas iremos inserir uma de cada vez.
• Sendo assim vamos prosseguir:
• Selecione o segundo quadro e novamente, insira um quadro chave.
• Acesse a guia Arquivo / Importar e insira a nova figura. Prossiga até que a ultima esteja
inserida.
Agora vamos efetuar uns ajustes:
• Para fazer qualquer modificação em algum quadro é necessário seleciona-lo;
• Então basta clicar e arrastar a imagem para a melhor posição;
Para visualizar o filme; basta acessar, no menu principal à guia controlar - Testar filme.
Estando tudo OK vamos configurar a publicação. Em Dimensões selecionar

Na guia arquivo configurações da publicação; Correspondente ao filme;
Na guia formato; vamos selecionar apenas a guia Gif; Em Reproduzir selecionar Animado,
Na guia Gif; vamos configurar: Clicar em publicar, OK;

Está tudo pronto:
Podemos salvar em local conhecido. Porém será salvo como filme do Flash.
Para ter o seu Gif animado a disposição será preciso Exportar como tal.
• Na guia Arquivo acesse a guia Exportar filme; Já estará definido como Gif animado; basta
salvar em local conhecido.
Publicar sua Web:

Quando a sua Web estiver pronta para ser exibida na World Wide Web ou na intranet de sua
organização, você deve publicá-la. Publicar uma Web é basicamente copiar os arquivos de sua Web para
um destino, tal como um servidor Web, onde outras pessoas possam procurar-la. Existem diversos serviços
de hospedagem gratuita, como Hpg, geocities e etc. Daí surge a primeira dúvida: existem servidores para
hospedagem que fornecem Domínio e outros não. Você pode ter um espaço dentro de um site com o nome
“www.geralsites.com” e o seu site será denominado “www. geralsites.com/ seu site/. Dessa forma o
geralsites tem domínio próprio e você não. Caso você opte por um domínio próprio: ficando www.seu
sites.com; então
surgirá a nova dúvida que é quanto a derivação da categoria do seu segmento de mercado; definir se será
ponto com, referente a comércio; será ponto ind, para industria; ponto jor para o profissional jornalista; etc.
Publicar seu site em serviços gratuitos pode ser financeiramente interessante, mas as limitações (quantidade de
espaço disponível, numero excessivo de banners e propagandas, tecnologia de hospedagem de conteúdo e ausência de
estatísticas especializadas) e imposições que esses serviços trazem são problemáticas. Além disso, sites hospedados
nesses provedores são rotulados como “sites amadores”. A melhor empresa para hospedagem, não tem endereço fácil.
Pois deverá ser aquela que tiver o melhor custo/beneficio; por tanto deve-se avaliar bem tudo que o possível provedor
oferece. Se um determinado site tem um grande acesso, deverá ser hospedado em um provedor de banda larga pos,
caso contrário seu site fica com o acesso lento. Para entender melhor do que estamos falando vamos esclarecer: A
largura de banda é a quantidade de dados que seu site transfere: Se 10.000 pessoas, que acessam este site, carregam
dele uma imagem de 10 KBs em um mês, isso quer dizer que seu site precisou de uma largura de banda igual a 100
MBs. Por tanto nesse período a largura de banda necessária é a imediatamente superior a 100Mg de largura de banda.
Lembre-se: seu site pode ter 200 páginas cada uma com 35 KBs ou 70 Mgs total; Em geral, cada visitante carrega
apenas uma página de cada vez; dessa forma, o trafego é que vai definir a necessidade de banda do seu site. A
aquisição de um serviço de hospedagem é regida por um contrato, que deve ser muito bem guardado, depois de bem
estruturado. Lembre-se que alguns problemas podem estar por fora de um contrato mau redigido. Alguns site não
informam; por exemplo, o que ocorre quando o site de sua responsabilidade ultrapassa a largura de banda contratada,
que pode ser de um custo absurdo. O limite de transferência não é feito para que você pague cada vez que você o
extrapola, mas sim para informar a capacidade, em termos de transferência e velocidade, que o servidor é capaz de
suportar. A grande parte de servidores de hospedagens tem uma franquia básica de 2GB/mês. Para iniciar um site isso
é muito bom porém, em pouco tempo será possível chegar a 10 GB/mês, no mínimo. Não pense duas vezes quando isso
acontecer, mude logo de provedor pois o crescimento na rede é muito mais possível do que se imagina.
Antes de publicar sua Web:

Antes de publicar a sua Web, você deve ter certeza de que ela esteja pronta; deve ser muito bem
verificando se há hyperlinks desfeitos, verificando se as páginas estão com a aparência desejada e testar a
Web para garantir que tudo esteja funcionando; deve ser feita uma revisão para determinar que todos os
arquivos estejam localizados dentro da sua Web; o FrontPage possui diversas ferramentas que
possibilitando uma rápida verificação.

A melhor maneira de garantir uma perfeita visualização da sua Web é sempre, a forma mais direta
possível; isso é: exibi-la direto em um navegador Web e navegando no site e revendo o status de seus
arquivos no modo de exibição Relatórios. Mais uma vez lembramos que a visualização de suas páginas em
diversos browsers, no ato da publicação, é uma conduta defendida por possibilitar testar os resultados
diretamente analisando as dificuldade de cada um dos browsers com relação ao esperado na confecção das
páginas.
Se você vai publicar a sua Web na World Wide Web, precisará de um Provedor de serviços de
Internet (ISP), de preferência um que tenha um servidor Web com as extensões de servidor do FrontPage
instaladas. Também será necessário conhecer as propriedades locais do servidor Web de seu provedor de
serviços de Internet para publicar a sua Web, além do nome do usuário e a senha, se necessários.
Alguns serviços a serem oferecidos por um provedor:

Espaço em disco: É o espaço disponível para armazenar seus arquivos de páginas (html, asp, etc) figuras
e imagens além de outros tipos de arquivos utilizados para construir um site. Dependendo do tamanho
destes arquivos, seu site pode ter até milhares de páginas. Você também pode disponibilizar arquivos para
download desde que não ultrapasse o limite de espaço, oferecido no plano adquirido.
Transferência Mensal: É o limite de transferência de dados durante o mês. Por exemplo: Considerando o
limite do site em 3gb e o tamanho de seu site 100 kb em conteúdo e imagens seu site poderá ter 300
acessos por dia.
Contas de Email (POP): Conforme o plano adquirido, você terá vários ou ilimitados endereços de email
@seusite.com.br, criados conforme a sua necessidade uma senha de acesso para cada um. Você poderá
criar, por exemplo : contato@seudominio.com.br, vendas@seudominio.com.br e acessá-lo através de nosso
webmail ou por qualquer programa de e-mail POP3 (Outlook, Netscape, Eudora, etc.). As contas são
gerenciadas por um sistema on-line, a ativação das contas de email é imediata.
WebMail: Sistema de Webmail totalmente interativo onde você pode ler as mensagens no servidor através
de nosso webmail em português acessível através do nosso site, podendo organizar as mensagens em
pastas e criar cadastros de emails. Ideal para uso em viagens ou mesmo para aquelas pessoas que
acessam seu e-mail de vários locais diferentes, e não querem perder tempo com configurações e
instalações de programas específicos para correio eletrônico. O webmail não interfere na leitura de
mensagens através do seu leitor de email, pois elas podem continuar gravadas no servidor até serem lidas
por ele.
AutoResponder: Sistema que permite configurar uma resposta automática para um determinado email do
seu domínio. Quando chegar um e-mail destinado a esta conta, é enviada ao remetente uma a mensagem
escolhida por você.
Redirecionamento: Com o redirecionamento de e-mail, é possível, por exemplo que "todos os
emails"@seudomínio.com sejam direcionados para apenas uma determinada conta de seu domínio.
Aliases: É uma opção que permite que você crie vários apelidos para que as mensagens destinadas a eles
sejam enviadas para uma conta de e-mail. Imaginemos que o funcionário João é o responsável pela
cobrança e pelo departamento pessoal. Podem ser criados dois apelidos:
cobranca@seudominio.com.br e pessoal@seudominio.com.br. Todas as mensagem destinadas a estes
aliases podem ir para uma conta cadastrada como, no nosso exemplo: joao@seudominio.com.br
Webalizer: O Webalizer é fornece relatório diário de acesso. Você poderá analisar qual é a média de visitas
ao seu site, quais as páginas mais visitadas, de onde é o host de acesso, estatísticas e muitas outras
informações.
Perl: É uma linguagem de programação para desenvolvimento de CGI (Common Gateway Interface). O CGI
torna sua página mais interativa com os visitantes, através dele você pode criar contadores de acesso, livros
de visitas, chats, fóruns, pesquisas internas por palavras-chave, formulários de votações, enquetes, enfim:
tudo que a criatividade de um bom programados permitir.
PHP: PHP4 (Personal Home Page) é uma linguagem que possibilita a criação de sites dinâmicos. Uma das
características mais comuns dessa linguagem é o fato dela ser executada no servidor. Trabalha muito bem
com o banco de dados MySQL.
MySQL: Este é um serviço de acesso a banco de dados para o ambiente Linux extremamente versátil. Com
ele é possível construir aplicações interativas e complexas. A administração do MySql é via Web atravês do
sistema PHPMyadmin.
Atualização ilimitada via FTP: Com o acesso a FTP (file transfer protocol ou protocolo de transferência de
arquivos) é possível transferir, buscar ou apagar os arquivos do seu site através de qualquer computador
que possua acesso à Internet. Com esse serviço, que é protegido por senhas individuais, você ou a
empresa que desenvolveu o seu site podem atualiza-lo a qualquer hora de qualquer dia, usando um dos
muitos softwares disponíveis para este fim que, podem ser adquiridos facilmente, inclusive gratuitamente.
FrontPage Extensions: O software FrontPage, da Microsoft é usado por muitos webdesigners. Por este
motivo, as extensões do Frontpage 98/2000 já estão habilitadas em todos os nossos planos, possibilitando a

utilização dos recursos desse software, como: formulários, contador de acesso, ferramenta de pesquisa de
conteúdo do site e demais componetes.
Active Server Pages (ASP): Active Server Pages (ASP) é uma técnologia criada pela Microsoft que gera
páginas HTML dinamicamente. Falado mais tecnicamente, a linguagem ASP é, na verdade, uma junção de
programação em VBScript e Objetos ActiveX. No plano ASP você pode utilizar linguagens VBScript,
PerlScript e recursos para utilização e acesso a bancos de dados.
Banco de Dados Access: Permite a criação de uma base de dados dentro do seu site. O uso desse
recurso tem ilimitadas aplicações: disponibilizar cadastros on-line, compartilhar informações com recursos
para criação e publicação de páginas interativas com links ativos para o seu banco de dados, possibilita
estender aplicativos do banco de dados para a Internet, criar páginas HTML vinculadas a dados para
consulta, atualização de páginas de forma interativa e muito mais
ODBC: Você pode usar ODBC (open database conectivity ou conectividade aberta de banco de dados)
através das páginas do seu site para acessar dados em uma variedade de sistemas de gerenciamento de
banco de dados tais como: SQL Server, FoxPro, Access, Paradox, Oracle dentre outros.
AspMail: É um componente da linguagem ASP que permite o envio de e-mail por páginas Web,
normalmente utilizado em formulários.
AspHTTP: Objeto da linguagem Asp que permite simular o preenchimento de um formulário usando o
código asp e recebendo o html de resposta desse formulário.
AspSmartUpload: É um objeto da linguagem ASP que permite o upload de arquivos, para o seu site,
através da interface Web, sem necessidade de usar o serviço de FTP.
AspPOP3: É um componente da linguagem Asp que permite o recebimento de e-mails utilizando o
protocolo POP3. Esse componente geralmente é utilizado no desenvolvimento de WebMail.
Cdonts: Collaboration Data Objects é uma biblioteca que funciona em uma plataforma Windows com
processamento no servidor, interagindo com o servidor SMTP. É normalmente utilizado em formulários.
Contador de Acessos: Você pode escolher diversos estilos de contador diferentes e especificar se ele
aparecerá em "estilo tradicional" ou invisível. Existem também opções de relógios e calendários para o seu
site.
Servidor Seguro (SSL): Corresponde a um protocolo de criptografia baseado em chave pública, de alta
confiabilidade, capaz de encriptar toda a comunicação entre os visitantes de seu site e nossos servidores ,
impossibilitando que estas informações sejam interceptadas em seu trajeto. A criptografia SSL pode ser
utilizada em:
- Formulários de contato;
- Proteger dados enviados pelo visitante;
- Aplicações sofisticadas como soluções de Intranet;
- Aplicações de comércio eletrônico e transações financeiras/bancárias (é nescessário a aquisição de um IP
próprio e de um certificado SSL para sua instalação).
Server Side Includes (SSI): Server Side Include, ou SSI, é um pedaço de código, que está incluído em
uma página HTML e é interpretado pelo servidor depois que a página é enviada ao browser do cliente. Os
comandos SSI podem incluir as informações no seu arquivo HTML como, por exemplo, a data da última
alteração, outro arquivo HTML, aplicar scripts com rotação de textos aleatórios ou rotação de banners.
Suporte a WML/WAP: WAP é um conjunto de especificações que descrevem como a comunicação é feita
e como a informação é codificada e apresentada em dispositivos móveis tais como celulares, pagers ou
palmtops).
WML é a linguagem especificada no WAP para criação de conteúdo, ou seja, é a versão para WAP do
HTML, sendo inclusive bastante semelhante à ele.
Diretório protegido por Senha: Possibilita o controle e administração de uma área ou diretórios do
site.Pode-se criar usuários (login) ou grupo de usuários com senha para o acesso.
Página de Erro Configurável: Permite a configuração de uma página personalizada para páginas 404 Not
Found (404 Página não encontrada) do seu site.
Formulário pré-configurado: Permite que dados preenchidos em um formulário sejam recebidos em um
endereço de e-mail. Os scripts Formmail e o FormRobot (em português) já estão prontos para serem
utilizados nas contas Linux, facilitando o envio de e-mails pelos visitantes. Para conta ASP, disponibilizamos
um formulário que utiliza o AspMail.
Para obter informações sobre Provedores de serviços de Internet (ISPs) que usam extensões de
servidor do FrontPage (conhecidos como Provedores de presença da Web), clique em Publicar no menu
Arquivo e, em seguida, clique no botão Provedor. Você pode também consulta a internet em uma busca por
‘hospedagem web’; a partir do resultado analisar as opções listadas.

Publicando / Transferindo arquivos com Microsoft FrontPage 2000:
Usando o FrontPage Explorer em conjunto com o FrontPage Editor, crie suas páginas;
Se não estiver aberta, abra a web, usando o FrontPage Explorer, que você deseja enviar para o servidor;
• Conecte-se ao seu provedor de acesso;

• Selecione no menu Arquivo, o item Publicar Web;
• Na tela que aparece, digite, no campo, "Especifique o local para publicar sua Web" o nome de seu
domínio.
• Pressione Publicar;
• Será solicitado: Código do Usuário e a senha que deve ter sido informado pelo seu provedor.
Como as extensões de servidor afetam a publicação:

Há várias vantagens em publicar em um servidor Web que tem as extensões de servidor do
FrontPage instaladas:
Sua Web terá funcionalidade completa do FrontPage quando for publicada. Sem as extensões de
servidor, determinados recursos não funcionarão, tais como a maioria de manipuladores de formulários,
formulários de pesquisa, contadores de acessos e recursos de alguns componentes. O FrontPage
atualizará seus arquivos e hyperlinks — toda vez que você publica a Web, o FrontPage compara os
arquivos em seu computador local com os arquivos no servidor Web. Por exemplo, se mover um arquivo em
sua Web local, o FrontPage atualizará e corrigirá quaisquer hyperlinks para ele e, em seguida, fará as
mesmas correções nos arquivos do servidor Web na próxima vez em que a Web for publicada (fique
atento). Após ter publicado a Web, você poderá editá-la diretamente no servidor Web do provedor de
serviços de Internet (no entanto, a versão local de sua Web não permanecerá em sincronização ou não será
atualizada). Se o seu servidor Web tiver as extensões de servidor, o FrontPage poderá publicar sua Web
usando HTTP (HyperText Transfer Protocol). Caso contrário, sua Web será publicada usando FTP (File
Transfer Protocol).
As Extensões Frontpage instaladas no servidor são programas CGI que permitem a implementação
das funções do FrontPage. O FrontPage comunica-se com as extensões via HTTP usando o Remote
Procedure Call (RPC) - procedimento de chamada remota. Quando o servidor vê a solicitação "POST"
endereçada às extensões FrontPage ele simplesmente redireciona a solicitação ao programa CGI
adequado. As extensões implementam a autoria (atualização, download de documento, criação de listas),
administração (configurando o usuário final e os privilégios do administrador), e conteúdos dinâmicos
(Componentes WebBot para a apresentação no browser).
Sem as extensões Frontpage no servidor você não será capaz de desfrutar as vantagens oferecidas
pelos WebBots do FrontPage. Alguns desses WebBots são:
Confirm Field - Confirmação de campos de formulário
Include - Função incluir
Scheduled Image - Inserir imagem automaticamente
Scheduled Include - Inserir função incluir automaticamente
Search - Busca
Substitution - Substituição
Table of Contents - Índice
Timestamp - exibir hora e data de atualização da página.
Também, sem as extensões você não será capaz de utilizar as ferramentas de autoria e
administração para web que fazem parte do pacote ForntPage Editor e FrontPage Explorer, como, por
exemplo, os FrontPage Themes (Temas) e recursos de Navigation (Navegação).
No momento da instalação, uma <Root Web> vazia será adicionada ao seu site, bem como uma estrutura
de diretórios de sistema:
_private _vti_txt
_vti_bin bin
_vti_cnf cgi-bin
_vti_inf.html cgi-local
_vti_log conf
_vti_pvt images
ATENÇÃO: não exclua nenhum destes diretórios ou arquivos. Isto prejudicará a funcionalidade do
FrontPage e de seu site.
Quando uma web de Frontpage criada em seu computador é publicada, ela é adicionada à Root
Web existente. A web publicada interagirá com as extensões permitindo aos usuários autorizados (que são
estabelecidos através das configurações de permissão de acesso do FrontPage) fazer alterações no
servidor remoto, como se estivesse em sua máquina local.
Escolhendo os arquivos a serem publicados:

Você pode escolher quais arquivos deseja ou não publicar. Por exemplo, se uma página estiver
incompleta ou não fizer parte diretamente de sua Web, poderá marcar o arquivo como Não
publicar. Mais tarde, se decidir publicar o arquivo, por exemplo: quando tiver concluído uma
página, poderá alterar seu status para Publicar.
Certos arquivos não devem ser publicados novamente após a primeira publicação de sua Web. Por
exemplo, crie uma Web com um livro de visitas e em seguida, publique-a.
Posteriormente, atualize suas páginas da Web — se você publicar todos os seus arquivos, incluindo o
arquivo que registra as informações do livro de visitantes, você salvará um livro de convidados em branco
sobre o existente, perdendo todas as informações. Outros exemplos incluem páginas com um contador de
acesso, Webs de discussão e catálogos (se estiver executando o Index Server).
Você também pode escolher para publicar apenas os arquivos que foram alterados. O FrontPage irá
comparar os arquivos na Web de trabalho em seu computador local com os arquivos publicados no servidor
Web. Se o FrontPage detectar uma versão mais recente de um arquivo em seu computador local, o arquivo
será publicado no servidor Web.
Gerenciando os arquivos no servidor Web:
Se o seu provedor de serviços de Internet (ISP) estipular um limite de tamanho no servidor Web, o
gerenciamento de arquivos é uma necessidade. Excluir periodicamente arquivos não-utilizados ou antigos
(principalmente gráficos) pode manter o tamanho de sua Web reduzido. Após publicar uma Web, o
FrontPage pode sincronizar os arquivos em sua Web local com os arquivos publicados no servidor Web,
toda vez que você publicar novamente.
Após excluir os arquivos de seu computador local, o FrontPage perguntará a você sobre a exclusão
dos mesmos arquivos no servidor Web quando publicar novamente sua Web e escolher para publicar
apenas as páginas que foram alteradas.
Se o seu servidor Web usa as extensões de servidor do FrontPage, o FrontPage também pode
combinar outras ações no servidor Web, tais como mover ou renomear arquivos, na próxima vez em que
você publicar a sua Web. O FrontPage atualizará suas barras de navegação, bordas compartilhadas e
hyperlinks no servidor Web para corresponder às ações executadas na Web em seu computador local.
Editar sua página através da Guia HTML
Veja o código criado pelo FrontPage:
<p>Página local</p>
<p><a href="pagina1.htm">pagina1.htm</a> </p>
<p>Home Page</p>
<p><a href="http://www.casaecia.arq.br">http://www.casaecia.arq.br</a></p>
No exemplo acima foi criado um Hyperlink para a página1.htm.
<p> determina que todo texto digitado entre as tags<p></p> ficará em um único parágrafo e um espaço de
uma linha dividirá este parágrafo do próximo
Podemos modificar o código HTML para que o texto tenha uma seqüência.
Usamos<font face=”arial” size=2>para definir qual fonte será usada.
Digitamos o Hyperlink<a href=”página1.htm”>

Modificamos o nome página1.htm para Primeira página ou Voltar, retornar algo parecido e fechamos o
Hyperlink com a tag </a>.
Se o texto seguir em outra linha digitamos <br>
Não esquecendo de fechar a tag </font> caso o texto seguinte utilize outro tipo e tamanho de fonte.
Veja o código completo
<font face=”arial” size=2>
<a href=”página1.htm”>Voltar</a><br>
</font>
Criando Meta Tags com o FrontPage:

Para editar uma meta tag no FrontPage, vá ao menu Arquivo e clique em Propriedades da Página;
ou então, você pode clicar com a tecla direita do mouse sobre qualquer parte da tela.
Aparecerá a janela a seguir:
Quando você clicar na opção "Propriedades" (1), irão aparecer as opções relativas às meta tags.
Elas são divididas em duas áreas: uma relativa as meta tags HTTP-EQUIV (2) e a outra às variáveis Nome

(6). Se você quiser inserir uma variável HTTP-EQUIV, clique no botão "Adicionar" (3), que aparecerá a
seguinte caixa de diálogo:
Os valores acima correspondem ao seguinte código em HTML:

<meta HTTP-EQUIV="refresh" CONTENT="5;URL=http://casaecia.arq.br">
Então, podemos ver que o campo "Nome" da caixa de diálogo corresponde ao valor HTTP-EQUIV no texto
html, e o camplo "Valor" corresponde ao valor CONTENT do texto. Após inserir os valores na caixa de
diálogo, clique no botão OK, que a sua variável agora aparecerá na área (2), como mostra a figura abaixo.
Para alterar algum valor, basta clicar sobre ele na área (2), e clicar no botão "Modificar.." (4). Para
remover alguma variável, opere de modo semelhante, só que clicando no botão "Remover..." (5) ao invés de
"Modificar.". Para trabalhar com as variáveis Nome, fazemos de maneira semelhante às variáveis HTTP-
EQUIV vistas acima, só que agora usando a área (6) e os botões (7), (8) e (9).
Enviando páginas para o servidor usando FTP:

O primeiro passo é adquirir um programa FTP. Indicamos o WS_FTP (shareware) que pode ser baixado
diretamente de nosso site. Basta clicar sobre o nome WS_FTP na versão desejada:
ws_ftp.zip (versão 16 bit - Windows 3.x) - 163Kb
ws_ftp32.zip (versão 32 bit – Windows 95/98 e NT) - 488Kb
fetch_2.1.2.sit.hqx (Fetch - para Mac) - 388Kb
Se você não possui um programa para descompactar os arquivos zip, baixe o WinZip.
Instalando o WS_FTP:
Para instalá-lo, basta criar um diretório e executar o arquivo copiado.
Uma vez instalado o programa, deve-se configurá-lo como mostra a Figura 1:

Figura 1
Obs.: Se o domínio já tiver sido registrado, use o nome de seu domínio onde se lê Host Name. Por exemplo,
ftp.dominio.com.br.
Certifique-se de selecionar a opção Automatic Detect para o Host Type -- Figura 1. Também é interessante
selecionar as opções Save Password e Auto Save Config para manter as mesmas configurações em uso no
futuro.Todos os outros campos poderão ser deixados em branco. Agora, depois de efetuar a conexão
discada através de seu provedor, pressione OK para se conectar ao servidor.
Nota: Se você tiver problemas com a transferência de dados, experimente clicar no botão Advanced e
aumentar o valor do campo Network Timeout.
Transferindo Arquivos com o WS_FTP:

Quando você se conecta ao servidor web, automaticamente será exibido o diretório raiz (root directory) de
sua conta. O programa WS_FTP mostra uma tela dividida em dois painéis: o painel da esquerda contém
arquivos de seu computador; o painel da direita mostra os arquivos que estão no servidor. Será possível
ver as diversas pastas/diretórios de sistema tais como cgi-bin, cgi-local, entre outras. Como mostra a Figura
2.
Figura 2

Você poderá transferir arquivos diretamente para diretório raiz e/ou criar outros subdiretórios. De
todos os diretórios de sistema já criados, o único que você provavelmente usará será o cgi-local, que é
reservado para receber scripts personalizados em CGI.
Para fazer com que sua home-page seja carregada automaticamente quando se visitar o seu site,
nomeie-a, em seu computador, como index.htm ou index.html em letras minúsculas e copie-a para o
diretório raiz do servidor.
Para enviar este ou qualquer outro arquivo para o servidor, selecione-o na parte no painel esquerdo
e pressione o botão ("-->") no centro da tela. Certifique-se de, ao enviar arquivos HTML ou script, usar o
modo ASCII. Para imagens, use BINARY.
Para transferir arquivos para subdiretórios, dê um duplo clique no subdiretório desejado antes de
iniciar a transferência.
Assim que os arquivos são transferidos para o servidor web, eles estarão disponíveis para que os
visitantes o vejam. Se você visitar sua página após a transferência de qualquer arquivo e o seu navegador
continuar exibindo a página antiga, será necessário recarregá-la. No MS Internet Explorer, pressione a tecla
F5; no Netscape, CRTL+R.
Observações importantes:
Como divulgar seu Site em equipamentos de buscas (Meta tags sim ou não?).
Existem dois tipos de sites de busca na web: os catálogos e os motores de busca. No primeiro, você
entra com todas as informações sobre o seu site, e estas informações são conferidas uma a uma por uma
equipe responsável pela inclusão dos sites no cadastro. A grande desvantagem deste sistema é a demora
para o seu site constar no catálogo, mas é compensado por uma melhor organização dos assuntos.
Os motores de busca lançam mão de programas especiais conhecidos como "spiders" (também
denominados "worms" ou "crawlers"). Estes programas rastream a Internet, colhendo dados das páginas
acessadas e anexando-os a um banco de dados. Esses dados são fornecidos através de meta tags que são
colocados na sua página. A vantagem de se usar os spiders é que o cadastro é mais rápido, já que os robôs
trabalham 24 horas por dia, 7 dias da semana. Mas como também a organização dos assuntos são feitas de
forma automática, a procura em um site desses pode ficar mais difícil.
Cadastrando a sua URL em 20.000 sites de busca ou apenas 20?

Para cadastrar seu site em um catálogo, você entra no site e geralmente há um local (normalmente
conhecido como "inclusão") onde você preenche os dados do seu site. Dentro de alguns dias ou semanas, o
seu site estará constando no sistema de busca. Nos motores de busca, você tem que ter no seu site meta
tags específicos (veremos como fazê-los mais adiante) que irão conter as informações sobre o seu site ou
página que servirão para alimentar a base de dados do sistema de busca. A visita do robô ao seu site pode
ser agendada, bastando para isso ir no site de busca e marcar a visita.
Existem vários sites na Internet que realizam o cadastro automático em 20, 100 ou 20.000
mecanismos de busca. Alguns são gratuitos e outros cobram uma pequena taxa. A vantagem disso é que
você tem que preencher os dados do seu site em apenas um único momento. Bem, opinião pessoal minha
é que cadastrar seu site em mais de 20 mecanismos de busca é perda de tempo, pois é fato que, mais de
90% das visitas aos mecanismos de busca nacionais se concentram no Cadê, Google, Yahoo!, Família
Miner e Radar UOL.
Portanto, cadastrando nesses sites é o caminho para o melhor retorno. Não quero menosprezar os
outros mecanismos de busca (existem centenas no Brasil), mas o retorno que eles te darão não
compensará o esforço para cadastrar o seu site neles. O mesmo vale para os mecanismos de busca no
estrangeiro. Cadastre o seu site nos mecanismos listados mais adiante.
Muito cuidado com a descrição do seu site:

O grande ponto para seu site aparecer nas buscas dos internautas nos mecanismos de busca é a
descrição do seu site. Qualquer palavra da descrição é usada na busca. Por isso, tente colocar o máximo de
palavras-chave que possam estar relacionadas com seu site na descrição. Por exemplo, veja a descrição de
um site sobre programação, por exemplo.
"Site de Programação - Aprenda aqui a programar em diversas linguagens"
Agora veja este outro:

"Site de Programação - Aprenda aqui a programar em diversas linguagens (Visual Basic, Delphi, Cobol,
etc.)"
Vamos supor que você seja um programador em Delphi e esteja procurando um site sobre Delphi. Que
palavra você digitaria em um mecanismo de busca: "programação", "Delphi" ou "Programação Delphi"? Em

qualquer uma das três tentativas, seria mostrada a segunda descrição do site. A primeira descrição só
apareceria se o navegador tentasse buscar por "Programação".
É interessante também saber o que as pessoas andam procurando nos mecanismos de busca e colocar
palavras-chave que se encaixem nesses assuntos, desde que o seu site também trate deles; logicamente
ou seja um louco varrido.
Configurando meta tags da sua página para os motores de busca:

Como já vimos, para os spiders dos motores de busca conseguirem alguma informação sobre o
nosso site, temos que fornecê-las a eles através das meta tags.
<HEAD>
<TITLE>Título do site</TITLE>
<META NAME="DESCRIPTION" CONTENT=" Faça a descrição do seu site">
<META NAME="KEYWORDS" CONTENT="Liste aqui as a de palavras-chave para o seu Site">
</HEAD>
Basicamente, são as informações acima que são usadas pelos motores de busca (podem ocorrer
algumas variações, dependendo do mecanismo de busca. Para saber se existe algo diferente a ser
configurado em sua página, é bom que se visite o site do serviço). Já falamos sobre a importância da
descrição do site, referenciada pela variável DESCRIPTION, mas outra tag, também muito importante é a
KEYWORDS. Nela você fará uma relação de palavras-chave que não aparecem na descrição, mas que
também serão usadas na busca. Essas palavras devem ser separadas por vírgula.
Só o cadastro das suas páginas nesses mecanismos ainda não é o suficiente para que seu site
obtenha uma maior visitação. É fundamental que elas apareçam pelo menos entre as três primeiras páginas
dos resultados de uma pesquisa nos mecanismos de busca, quando for procurado algo relacionado com o
seu site. A grande maioria dos internautas, não navegam além, dos primeiros 40 resultados mostrados
nestas páginas. Agora, aí vai a grande questão: "Como destacar sua página entre as milhares, que existem
na Internet?" - Não é tarefa impossível, e seguindo algumas dicas, isso pode ser alcançado.
Entenda como os mecanismos de busca fazem o "rankeamento" das páginas:

Cada mecanismo de busca segue um "algoritmo" (ou uma série de regras) para determinar a ordem
em que as páginas relacionadas a uma palavra ou frase pesquisada aparecerão nas suas páginas de
resultados. Essas regras variam muito de um mecanismo para outro, e nem sempre são reveladas. É por
isso que pode acontecer de sua página aparecer na primeira página de resultados de um mecanismo e nem
aparecer em outro. Os "robôs de busca" geralmente fazem o "rankeamento" através do título da página (que
está na tag <TITLE> do código HTML da página, ou através de META tags, ou "popularidade em links" (ou
seja, quanto maior o número de outros sites que tiverem um link para sua página, melhor poderá ser sua
posição).
Invista na qualidade do conteúdo do seu site
Esse é um aspecto fundamental, e cada vez mais usados pelos mecanismos de busca. Quanto
mais qualidade seu site tiver, pode ser melhor rankeado, baseado na análise de um funcionário do
mecanismo de busca, e ainda, seus usuários sempre retornarão ao seu site e irão recomendá-lo para outras
pessoas. Isso gerará que outros sites criem links para o seu site, o que irá melhorar a sua "popularidade de
links".
Escolha as palavras-chave mais adequadas:

Se sua página tem palavras-chave que são muito comuns, pense em aprofundar mais em
determinado aspecto para melhorar o seu posicionamento. Por exemplo, a palavra "cavalo" irá retornar
milhares de respostas e seu site pode não aparecer no topo dos resultados. Mas algo mais específico, tipo
"cavalo árabe" ou "quarto de milha" trazem menos resultados e seu site tem maior chance de estar entre o
topo da lista de resultados e ainda, estar mais de acordo com o que seu visitante deseja.
A maioria dos visitantes dos mecanismos de busca usa frases para melhorar os resultados. Como
vimos anteriormente, "cavalo árabe" dá bem menos resultados, e mais específicos, que "cavalo".
Ao escolher as palavras para descrever o seu site, veja o artigo "Explorando os termos mais
pesquisados nos mecanismos de busca".
Muitos mecanismos de busca observam se as palavras pesquisada se encontram no título da

página, que é encontrado dentro da tag <TITLE> do código HTML da página. Se sua página tiver, será
melhor colocada do que as que não têm. Recomenda-se que a tag <TITLE> seja colocada logo após o
início da área <HEAD> da página, antes de qualquer outra tag.
Inclua as palavras-chave nas meta tags "KEYWORD" e "DESCRIPTION"
Nem todos os mecanismos de busca usam meta tags. Existe um artigo na seção HTML (veja aqui)
fornecendo mais informações sobre meta tags. Mas não custa nada acrescentar esta informação. Segue um
exemplo abaixo de código HTML de uma página com as meta tags:

<HEAD>
<TITLE>Título do site</TITLE>
<META NAME="DESCRIPTION" CONTENT="descrição do site">
<META NAME="KEYWORDS" CONTENT="lista de palavras-chave adicionais">
</HEAD>
Em DESCRIPTION, damos uma descrição do site. Em KEYWORDS digitamos uma relação de palavras-
chave que não aparecem na descrição, mas que também serão usadas na busca. Essas palavras devem
ser separadas por vírgula.
O uso destas meta tags não são tão importantes quanto a correspondência no título da página, mas
se o mecanismo de busca usá-las também, isso poderá lhe render uma boa vantagem sobre os sites que
não usam.
Uma informação importante é que a maioria dos mecanismos de busca não lêem mais que 150 (ou
até 400, dependendo mecanismo de busca) caracteres em DESCRIPTION e 1000 caracteres em
KEYWORDS. Por isso, inclua as palavras-chave mais importantes no início destas meta tags.
Usando as palavras-chave dentro do conteúdo da página:

Alguns mecanismos de busca verificam se as palavras-chave aparecem no início da página, como
no cabeçalho ou nos primeiros parágrafos do texto. Quem corresponder a essa regra terá vantagem na
classificação do mecanismo.
Uma coisa interessante é que nessa verificação, palavras encontradas dentro da tag <H1>, usada
para cabeçalhos, têm mais relevância do que as que estão na tag <P>, de um parágrafo normal. O
problema é que textos com tag <H1> ficam grandes demais e podem não ser o mais indicado para o texto.
Uma maneira de "burlar" isso é usando CSS, definindo um estilo para a tag <H1> de maneira que
não atrapalhe o visual da sua página, e melhorando a relevância da sua página no mecanismo de busca.
Veja um exemplo abaixo:
Na área <HEAD> do código HTML da página, adicione o seguinte:
<STYLE TYPE="text/css">
H1 {font-family: arial,helvetica; font-size: 12pt; color: black}
</STYLE>
Neste exemplo, todas as tags <H1> desta página usarão a fonte Arial ou Helvetica, tamanho de 12
pt e cor preta. Esses valores, com conhecimento de CSS, podem ser alterados à vontade para que fiquem
melhor adaptados à sua página.
Número de palavras-chave dentro do conteúdo da página:

Também conhecida como "densidade da palavra-chave", é obtida dividindo o número de aparições
da palavra-chave pelo número total de palavras na página. Quanto maior este número, mais importante será
a página para o mecanismo de busca. Mas deve-se tomar cuidado, pois uma densidade alta demais pode
ser considerada como "spam" por alguns mecanismos e a página (ou o site) será banido. Existem pessoas
que tentam se aproveitar dessa regra e colocam "centenas" de repetições da palavra-chave na mesma cor
da cor de fundo, tornando-se "invisíveis" para os visitantes, mas não para os mecanismos de busca. Uma
bom valor para a densidade fica em torno de 1 a 5%.
Melhore a sua popularidade em links:

A maioria dos mecanismos de buscas usa a análise de links em outros sites como fator importante
de pontuação em seus algoritmos de classificação. Um bom exemplo é o mecanismo de busca Google, que
é praticamente baseado neste critério. Quanto mais links sua página tiver em outro site, o mecanismo de
busca entende que ele é mais importante em determinado assunto do que outros, e aparecerá com mais
destaque na lista de resultados.
Só que a popularidade não significa que é medido só a "quantidade" de sites que possuem links para seu
site.
O que conta aqui é a aparição em sites mais populares que estão relacionados com os assuntos
procurados pelos internautas. Se você tiver poucos links, mas que estão nestes sites mais populares, valerá
muito mais do que vários links em sites que não são considerados como tal.
Uma maneira para encontrar estes sites mais populares é visitar os principais mecanismos de busca
e pesquisar as suas palavras-chave. Verifique as páginas que aparecem nos primeiros lugares dos
resultados.
Agora vem uma parte de "relações públicas": visite aquelas páginas e negocie com os seus
administradores a criação de links para o seu site, através de troca ou compra de espaço, etc. Para a troca,
com certeza seu site tem que ter qualidade e conteúdo de interesse, senão vai ser muito difícil.
Nem todos criarão o link, principalmente se forem concorrentes. Mas se pelo menos um desses sites
populares criarem um link para você, em breve isso terá um ótimo retorno para sua posição nos

mecanismos de busca. E também você terá mais visitas, pois esses sites populares tendem a ter muitos
visitantes. E quanto mais links tiver, melhor.
Dicas do mecanismo de busca Yahoo!

O Yahoo! difere um pouco dos robôs de busca, pois você tem que fazer uma inscrição manual para entrar
no seu catálogo de sites. Por outro lado, ele também faz varredura de páginas, através de uma parceria
com o mecanismo Google. Por isso que nas páginas de respostas, logo acima você vê três áreas bem
distintas: "Categorias", "Sites" e "Páginas".
Sobre a parte de "Categorias" e "Sites", que é o que é mostrado primeiro na lista de resultados, e no qual
temos que nos concentrar para aparecer com mais destaque no Yahoo!, no informativo oferecido pela firma
MarketPosition (http://www.marketposition.com) há algumas dicas relativas ao algoritmo usado pelo
mecanismo de busca Yahoo! (www.yahoo.com e www.yahoo.com.br). Este algoritmo busca a ocorrência de
uma palavra-chave nas seguintes áreas:
1. Categoria em que seu site foi colocado no Yahoo - Se a palavra aparece na categoria onde seu site está
classificado, você terá uma melhor colocação na lista de resultados. Por isso, quando você cadastrar seu
site no Yahoo!, escolha as categorias que tenham as melhores palavras-chave relativas ao seu site.
2. Título do Site - Quando você cadastra este título, é bom colocar um título que referencie bem o seu site e
que seja favorável alfabeticamente (começando com as letras iniciais do alfabeto). Você tem que tomar
cuidado nessa parte pois se o título não tiver de acordo com o domínio ou o conteúdo do seu site, ele será
trocado no momento da inserção do catálogo por um que o operador do mecanismo achar mais apropriado.
3. Descrição do Site - Sempre inclua as melhores palavras-chave relativas ao conetúdo do site na
descrição que você envia ao Yahoo!
4. Domínio do Site - Se no nome de domínio do seu site contiver a palavra procurada, sua posição na
lista de resultados será melhor. Por isso, até na escolha do domínio do site isso deve influenciar.
Fatores que influenciam na classificação do Yahoo:

Quando você tem as palavras-chave nas áreas listadas acima, o Yahoo! irá considerar os seguintes fatores
para "classificar" o seu site:
1. Localização - O Yahoo dá ênfase ONDE a palavra-chave aparece em cada uma das áreas. Se a palavra
aparece no começo do título, descrição ou domínio de um site, este site terá preferência sobre aquele que
tem a palavra no meio ou no final dessas áreas.
2. Frequência - O número de vezes em que a palavra-chave aparece em cada área é levada em
consideração, mas geralmente, os editores do Yahoo não permitem que você repita a palavra-chave mais
de uma vez em qualquer área. O melhor jeito de ter frequência é ter certeza que sua melhor palavra-chave
aparece no maior número de áreas possível.
3. Densidade - Suspeita-se que o Yahoo divide o número de palavras-chave na descrição (e possivelmente
em outras áreas) pelo número total de palavras para computar a densidade. Isto é, se suas palavras-chave
ocupam uma grande porcentagem da descrição total do site, então aquela palavra-chave terá mais
influência no resultado. Uma estratégia pode ser diminuir o número de palavras na descrição do seu site,
resumindo-se apenas às palavras-chave, lembrando-se que o Yahoo limita o número de palavras-chave
diferentes que você pode colocar e o texto tem que ser legível para quem ver a descrição do seu site
"entenda" o seu propósito.
4. Proximidade - Quando é realizada a busca por uma frase, quanto mais próximas as palavras da frase
estiverem na descrição do site ou em outra área, o seu resultado será melhor. Todas as palavras ou pelo
menos uma palavra derivada de cada uma, precisa existir na lista. Por exemplo, se procurar por "Maçãs" e
"vermelhas", você pode obter resultados contendo as palavras "maçã" e "vermelha", na sua forma singular.
Agora, se usuário digitar "Maçãs vermelhas" com aspas no campo de busca, o Yahoo não usará derivadas.
Popularidade em cliques (click-through popularity) - Outra variável significante na classificação no
Yahoo é a sua popularidade em cliques. É guardada um proporção de número de cliques no seu link com o
número de aparições na lista de resultados. Também é medido o tempo que o usuário gasta no seu site
antes de voltar ao Yahoo (se não voltar, quer dizer que seu site atendeu à procura do usuário, mas se voltar
imediatemente e escolher outro site, você é penalizado, pois entende-se que o seu conteúdo é pobre ou não
atendeu o usuário). Então, se seu site alcança uma "massa crítica" em termos de popularidade, você irá
para o topo da página.
Vários cliques de uma mesma máquina (endereço IP) não têm efeito, mas muitos cliques de vários
IPs diferentes aumentam a popularidade do seu site, se atenderem os usuários.
As dicas acima valem para seu site aparecer nas seções "Categorias" e "Sites" das páginas de resultados,
que utilizam os dados que você inseriu quando cadastrou seu site no Yahoo. Na seção "Páginas", como é o
mecanismo "Google" que é utilizado, configure suas páginas usando as regras gerais apresentadas
anteriormente para os robôs de busca.
Dicas do Google:

O Google é um dos maiores mecanismos de busca atualimente, e é usado pelos mecanismos
Yahoo! e Netscape. Ele não se interessa muito pelos meta tags <DESCRIPTION> e <KEYWORD>, mas é
muito importante para ele a tag <TITLE> e o conteúdo da página (que mostramos anteriormente) e a
popularidade em links (esse sim é muito importante aqui!). As outras recomendações gerais mostradas
anteriormente também servirão para ajudar na classificação do seu site.
Dicas do Inktomi:
O Inktomi é outro mecanismo importante, pois alimenta outros como MSN Search, AOL Search and
HotBot. Assim como o Google, um dos fatores mais importantes para a classificação no Inktomi é a
popularidade em links. Mas ao contrário do outro, as meta tags <DESCRIPTION> e <KEYWORD> são
observadas.
Uma dica no Inktomi é que no próprio site dele (http://www.inktomi.com) não existe uma maneira de
incluir a sua URL gratuitamente, mas isso pode ser feito submetendo sua URL em um de seus parceiros,
como o HotBot. A página de inclusão de URL no HotBot é: http://www.hotbot.lycos.co.uk/submit.html. Outra
maneira de ser incluído é naturalmente, uma vez que os robôs deste mecanismo varrem a web, e se tiver
uma boa popularidade em links, provavelmente estes robôs chegarão ao seu site.
Dicas do FAST Search (AllTheWeb.com)

O FAST Search alimenta os resultados do serviço Lycos, que está presente em todo o mundo e em
portais importantes, como o Terra.
Assim como os mecanismos anteriores, a melhors maneira de ser incluído gratuitamente neste mecanismo
é através da sua popularidade em links, que também contará muito para a sua classificação. Mas ele
também pode ser incluído manualmente no próprio site.
Dicas do Teoma:
O Teoma alimenta os resultados do serviço Ask Jeeves e do MSN Search, e não tem uma página para
adicionar o seu site gratuitamente. Mas como os outros mecanismos, se você tiver uma boa popularidade
em links, o seu site será incluído naturalmente quando os robôs do Teoma vasculharem a web.
O Teoma classifica as páginas baseda no seu conteúdo, e depois por uma taxa de popularidade, medindo o
tempo em que os usuários permanecem em um site depois de clicado. Isso quer dizer se muitas pessoas
clicarem no seu site e então voltarem rapidamente para o mecanismo de busca, atrás de outro link, você
perderá pontos. A qualidade do seu conteúdo aqui é fundamental para "prender" o visitante.
Dicas do MSN Search:

Cada vez mais usado em todo o mundo, é interessante entendermos como funciona este
mecanismo de busca, uma vez que nele não há um local para a inclusão de uma URL. Em um informativo
distribuído pela firma MarketPosition (http://www.marketposition.com) há algumas dicas de como funciona o
MSN Search:
O MSN combina os resultados de quatro fontes distintas:
1. Popular Search Topics - Tópicos Mais Procurados (DirectHit/Teoma)
2. Featured Sites - Sites Interessantes (MSN reviewed sites)
3. Web Directory Sites - Sites do Diretório da Web (Looksmart)
4. Web Pages - Páginas da Web (Inktomi)
1. Popular Search Topics - Tópicos Mais Procurados
Os links "Popular Search Topic" estão em uma área separada no topo da página e vêm do DirectHit.com
(que agora faz parte do mecanismo Teoma). Até quatro links serão mostrados e apenas para os termos de
busca mais populares. Siga as dicas do Teoma, mostradas anteriormente.
2. Featured Sites - Sites Interessantes
Depois dos resultados do Teoma, você verá até cinco "Featured Sites" ou "Sites Interessantes". Estes sites
são aqueles que o pessoal da MSN selecionou e achou relevante para aquela busca. Abaixo seguem
algumas dicas para que seu site seja listado como "Sites Interessantes":
Seja listado no Looksmart.
Seja uma referência no conteúdo proposto. Quanto um editor da MSN vê um bom conteúdo no seu site,
mais chance que você seja selecionado.
Use palavras-chave que representem com clareza o conteúdo do seu site.
3. Web Sites - Sites do Diretório da Web
Depois dos "Sites Interessantes", o mecanismo de busca do MSN mostra os resultados do diretório
Looksmart. Neste caso, estar bem classificado no Looksmart também significa um bom resultado no MSN
Search. O problema é que a inclusão no Looksmart é paga.
4. Web Pages - Páginas Web
Depois dos resultados obtidos das fontes anteriores, o MSN apresentará páginas oriundos do mecanismo
Inktomi. Nesse caso, siga as dicas do Inktomi, mostradas anteriormente.

Outras considerações:
Frames - Boa parte dos mecanismos de buscas não seguem links em frames. Se você quiser um bom
posicionamento, talvez tenha que remodelar o seu site no casão de estar utilizando frames.
Image Maps - Vários mecanismos, como Google e Inktomi, não suportam a procura nestes componentes.
Depois de incluídono sistema de busca, pode levar de 4 semanas até meses para aparecer seu site nas
listas de resultado. Por isso, paciência é necessária. Se você quiser adiantar esse processo e tiver dinheiro
para isso, é necessário recorrer à submissão paga, oferecida pela maioria dos sites, que garantem a rapidez
no processo.
Links interessantes:
Para equipamentos de busca:
Search Engine Features For Webmasters (http://www.searchenginewatch.com/webmasters/features.html) -
mostra um resumo de como os robôs de busca classificam as páginas.
Where do engines pull their results? (http://www.webposition.com/engine-sources.htm) - Saiba aqui de onde
vêm os resultados dos principais mecanismos de busca na Internet.
Para captura de recursos:
http://WWW.javafile.com site em inglês, bem organizado, que oferece diversos aplicativos java para o site.
http://www.scriptfacil.com assim como http://www.codigolivre.com.br possui uma estrutura para atender em
quase tudo que você possa vir a precisar, nas mãos diversas linguagens de programação.
Para captura de softwares.
http://www.shareware.com
Pense um pouco.
Leia muito e discuta tudo a respeito daquilo que pretenda se dedicar profissionalmente. O melhor,
com certeza está predestinado a ser superado. Superar é o começo de tudo e não o fim.
Todo mundo entra na rede a fim de obter informações; portanto essa é a base de qualquer site.
Não exija que o seu visitante faça qualquer coisa, de liberdade para ele comentar e indicar a
terceiros, tudo aquilo que avaliou para formar aquela boa imagem do conteúdo do seu site.
Promoção demais impede que o cliente acesse e adquira o produto que realmente vale a pena.
Todo planejamento deve ser cuidadoso e bem estruturado, baseado em parâmetros consistentes e
atuais.
Jamais inicie uma obra antes de ter um projeto definitivo.
É bem melhor esperar pouco e receber algo a mais do que esperar muito.
Não há nada melhor para o momento do que aquilo que temos à mão.
Aquilo que, ainda não parece estar bom... realmente precisa se enquadrar dentro dos conceitos
básico. Por tanto não está bom.
Alguns erros do webdesigner são imperdoáveis.
È fundamental ter sempre em mente que o que vai ser visto, pela primeira vez do seu trabalho, em
um espaço de no máximo 20 cm X 30 cm é o que realmente vai definir se o visitante prossegue navegando
em seu site ou não. Portanto... torne o seu site popular, de fácil acessibilidade, agradável, interativo mas
simples, alegre porém comedido, com base no novo e de fácil acesso. Agora eu procuro descrever algumas
das informações que mais se tem discutido na rede.
Impor restrições ao seu visitante é afastar de vez a possibilidade de um retorno a sua página. Ainda
é comum ver solicitações de cadastro anterior à permissão de acesso as páginas por exemplo... Todos os
internautas sofrem com o uso indiscriminados dos spans provenientes desses cadastros. O próprio span é
um convite ao não acesso de sua página. A corrida pelo premio Ibest faz com que muitos sites, que em sua
maioria, não tem conteúdo algum, exija do seu visitante um voto, de forma insistentemente; de tal maneira,
que o visitante só tem um jeito de se livrar daquela janela pop... saindo do site.
Seja democrático: na confecção do seu site jamais conduza a padronagem de visualização do tipo:
aqui somente: 800x600; ou só Internet explore, somente se você tiver o plug-in.
O uso de tecnologias, realmente pode trazer um ar inovador e arrojado para sua página, pena que
poucos poderão ver aquilo que você quer realmente mostrar. De uma olhada nas estatísticas, nas vendas
de produtos e observe que uma grande maioria não passou do Pentium 200 Mhz ou similar, os moldem são
de no máximo 56 kb. O custo de toda essa tecnologia não a torna popular e para obte-la, ou não depende
principalmente da necessidade e não pelo prazer.
A cor é fundamental... O uso adequado de um arranjo, previamente definido, para o uso das cores
faz toda a diferença. Lembre-se: “A primeira imagem é a que fica”. Durante todo o planejamento eleja a
facilidade de leitura como uma das que mais pesem na escolha das cores.

Não transformar o site em um arco íris ajuda bastante, mas transforma-lo em uma “Las Vegas”...
piscando e pulando na tela do visitante, também é agressivo e de extremo mau gosto, sem falar que é
visivelmente infantil.
Os internautas não perdoam, de forma alguma, e isso é fato; aqueles “sites em construção”. È tipo
aquele cara bobão que insiste, insiste e quando todos resolvem ouvi-lo ele não tem o que dizer. A internet é
dinâmica e de base informativa, jamais coloque, apenas o seu projeto na rede conclua, e só depois
publique.
Texto e imagens são fundamentais e com características interativas. A imagem colabora com o
texto e nunca ao contrário. Lembre-se que um texto sempre vai pesar menos na sua página do que uma
imagem.
Os frames não carregam todods ao mesmo tempo, e podem não ser visto em alguns browsers e na
verdade podem confundir o navegante, além de ocuparem espaço e demorarem para carregar. Na verdade
eles tem sido abolido pelos Webdesigners; pois embora sejam atraentes, eles quebram um principio básico
da informação na web: a cada janela uma única página e uma única URL.
Vá de encontra ao seu visitante... Não complique, de forma alguma o acesso a suas páginas. O
efeito labirinto deixa qualquer visitante louco... Prefira uma proposta que facilite a navegação, a leitura
rápida e de movimentação tranqüila e democrática.
Janelas e janelinhas... tem coisa mais irritante? Span? Nuca faça uso dessas coisas idiotas...
ninguém possui qualquer tipo de comentário sustentável de agrado delas. Uma coisa que irrita, atrapalha,
jamais poderá trazer algum retorno consistente ou digno de ser considerado.
Nunca... jamais... deforma alguma utilize chavões do tipo: eu sou o maior, o único, o mais, o
primeiro, insuperável, pois será com certeza, considerado tudo isso, de bobo... e na melhor das opções
infantil.
Curiosidades:
A internet e sua história.

As redes de computadores existem há mais de vinte anos e são utilizadas por milhões de pessoas
em todo o mundo. A primeira rede, ARPANET, que na sua origem conectava centros militares e de
pesquisas, foi utilizada por alguns cientistas de computação para obter acesso a computadores,
compartilhar arquivos e enviar mensagens eletrônicas Hoje em dia, cientistas, engenheiros professores,
estudantes, bibliotecários, médicos, homens de negócios, políticos e até crianças, o utilizam para receber
jornais eletrônicos, ter acesso a "Bulletins boards"(BBS – Visto mais adiante) , consultar bases de dados e
utilizam, remotamente, vários equipamentos. Atualmente, dentro da comunicação global, a informação
disponível na INTERNET ultrapassa os limites físicos, políticos e as estruturas econômicas de todas as
partes do planeta, transformando-se em um fórum universal que independente de raça, profissão ou idade,
disponibiliza informações das mais variadas para todos que se ligam a rede.
A ARPANET "foi aposentada" em 1990, a CSNET deixou de existir em 1991 e a INTERNET continua
crescendo incontrolavelmente. Hoje, ela engloba mais de 5000 redes espalhadas em 145 países
espalhados pelos 5 continentes. Estima-se um crescimento de 10% ao mês e um intercâmbio de mais de
15 milhões de mensagens entre a INTERNET e todas as demais redes conectadas.
A INTERNET começou a ser utilizada no Brasil, em meados de 89/90, somente por Instituições de
pesquisas e um pouco depois por Universidades, permanecendo, assim, até o final de 1995, quando a
exploração comercial teve início com a liberação de um BackBone lançado pela EMBRATEL, com um
grande incentivo para a sua propagação da mídia, que passou a abordar o assunto, utilizando-se até de
novelas. A INTERNET nasceu em 1969 para descentralizar informações militares norte-americanas em
várias redes, a fim de se evitar que um ataque soviético estratégico destruísse informações militares
armazenadas em grandes computadores. Com isso, surgiu a ARPANET (rede da Advance Research
Projects Agency), um projeto experimental do departamento de defesa norte americano que interligava
computadores a centros de comando remotos.
Algumas redes experimentais se juntavam a ARPANET através de rádios e satélites.
No final dos anos 70 surgiu a USENET (Users Network) prestando serviços a comunidades universitárias e
algumas organizações comerciais.
No início da década de 80, a ARPANET dividiu-se em : ARPANET e MILNET (também militar),

mantendo a comunicação entre ambas originou o nome de DAR INTERNET e depois se abreviou para
INTERNET.
Em 1986, foi criada a NSFNET (National Science Foundation Network) para viabilizar a conexões de
pesquisadores aos cincos grandes centros dos EUA e abrangendo, rapidamente redes acadêmicas e
escolares. Nessa época, a INTERNET iniciou sua expansão. Novas redes foram, a ela, conectadas, mais
computadores e conseqüentemente mais participantes. Redes internacionais similares surgiram e hoje,

temos uma presença mundial significativa, salvo na África , onde contamos com poucos pontos de
presença.
Conceituação de um provedor
Para esclarecer alguma coisa sobre provedor de serviços de internet é preciso entender
perfeitamente como funciona a internet.
Para que exista uma rede é preciso que muitos computadores possam ser interligados ao mesmo
tempo. É necessário que cada computador tenha instalado, internamente, um dispositivo chamado placa
de rede. Ela permite que vários computadores sejam interligados simultaneamente, uma rede local, ou LAN
(do inglês Local Area Network). Se essa LAN for ligada à Internet, todos os computadores conectados a
LAN poderão ter acesso à Internet. É assim que muitas empresas proporcionam acesso à Internet a seus
funcionários. Uma rede é formada por vários computadores interligados dentro de um mesmo
estabelecimento (cidade, estado ou provedor). A INTERNET é a "rede das redes". Ela é composta de
pequenas redes locais(LANS), redes estaduais e enormes redes nacionais que conectam computadores de
diversas organizações ou provedores pelo mundo a fora. Essas redes estão interligadas de diversas
formas, desde uma simples linha telefônica discada até malhas de fibras óticas.
Estar na INTERNET significa participar de uma rede, onde diversos computadores, interligados a
várias LANS, de vários provedores, se interligam a muitas outra redes de todo o mundo. As redes que
formam a Internet são Interligadas por outras redes de alta capacidade, chamadas backbones ( espinha
dorsal ). Os backbones são poderosos computadores conectados por linhas de grande largura de banda
como canais de fibra óptica, elos de satélite e elos de transmissão por rádio. Sendo assim, a Internet não
tem um dono ou uma empresa encarregada de administrá-la .
A instituição que mais se aproxima de uma administração central é a Internet Society. Trata –se de
uma entidade baseada no trabalho voluntário de seus integrantes com o objetivo único de exercer o mínimo
controle necessário para manter a REDE em funcionamento. O princípio básico de uma rede é a
capacidade de "comunicação" entre dois computadores. Para isso, utilizam-se protocolos, regras ou
convenções que regem essa comunicação. Para que a comunicação se efetive , dois computadores devem
utilizar o mesmo protocolo, simultaneamente.
TCP/IP (Trasmission Control Protocol / INTERNET Protocol) é a família de protocolos da
INTERNET, desenvolvida nos anos 70 e utilizada pela primeira vez em 1983.
World Wide Web W W W:

WWW é um serviço baseado em um hipertexto (documentos que possuem, dentro de si, conexões
com outros documentos) e que permite buscar e recuperar informações distribuídas por diversos
computadores da rede. O hipertexto é uma forma de apresentação gráfica de informação que contém
palavras com ligações com outros textos, o que torna possível se fazer leituras diversas e não lineares.
Você pode selecionar uma das palavras que aparece assinalada e ter acesso a um novo documento,
associado com o termo selecionado.
O novo documento, por sua vez, é um outro hipertexto com novas palavras assinaladas. Assim ,
como o gopher, o servidor WWW pode interligar-se com diversos outros servidores WWW, possibilitando a
navegação em informações, distintas, disponíveis na rede. O documento recuperado não precisa ser
necessariamente em texto. Também pode conter outros tipos de informação, tais como imagens, gráficos e
sons. Cabe lembrar que através de um servidor WWW, é possível não só o acesso a documentos, mas
também o acesso aos demais serviços da rede, como ftp, wais, gopher, telnet, os quais você verá
posteriormente.
Assim sendo fica claro que a empresa que tenha uma rede local LAM , formada com computadores
interligados por conectores capazes de transmitir grandes volumes de dados e que esteja conectada a
Internet (rede mundial de computadores).
No momento que ela permita e/ou venda condições de acesso a essa sua rede, para usuários diversos,
torna-se a empresa que nos conhecemos com PROVEDOR DE SERVIÇOS.
na Internet
Uniform Resource Locator U R L:
A internet usa uma nomenclatura específica para indicar o endereço de um documento. Chamada
de Uniform Resource Locator (Localizador universal de recursos), ou abreviado, URL, essa nomenclatura
inclui três componentes: ela deve conter o protocolo do documento (como, por exemplo, http, gopher ou
WAIS), o endereço de servidor e a localização do arquivo, usando a seguinte sintaxe:
Protocolo://servidor.NomeDoArquivo onde:
Protocolo:É o tipo de protocolo de comunicação que deve ser usado.
Servidor:É o nome do servidor que será acessado.
NomeDoArquivo:É o nome do documento HTML (ou de outro tipo) que será acessado.

Vejam só um exemplo:
http://www.casaecia.arq.br/index.html
HTTP:É o protocolo
www. baralho.com.br:É o nome do servidor
index.html:É o nome do arquivo que será acessado
Como protocolo podem ser usados:
HTTP:É um servidor da World Wide Web que contém documentos no formato 'HTTP', que significa
HyperText Transfer Protocol.
GOPHER:É um servidor cujo conteúdo é composto por menus e diretórios com informações sobre arquivos
e dados.
FTP:É uma abreviação de File Transfer Protocol.
TELNET:Este protocolo inicia uma sessão para se conectar remotamente a outro computador.
WAIS:Wide Area Indexed Server é um local onde documentos estão disponíveis em um formato especial de
pesquisa. O protocolo do servidor sempre deve ser seguido dos símbolos " :// " e do endereço do
computador remoto. Por enquanto, você não precisa se preocupar muito com o funcionamento desses
servidores, mas sim entender que um URL é apenas um endereço completo para acessar um arquivo na
rede.
FILE:// Indica que o documento está no micro ou na rede local.
Conhecendodo PHP
Rasmus Lerdorf – engenheiro de software, membro da equipe Apache e o homem misterioso do
ano – é o criador e a força motriz original por trás do PHP. A primeira parte do PHP foi desenvolvida para
utilização pessoal no final de 1994. Tratava-se de um wrapper de PerlCGI que o auxiliava a monitorar as
pessoas que acessavam o seu site pessoal. No ano seguinte, ele montou um pacote chamado de Personal
Home Page Tools (também conhecido como PHP Construction Kit) em resposta à demanda de usuários
que por acaso ou por relatos falados depararam-se com o seu trabalho. A versão 2 foi logo lançada sob o
título de PHP/FI e incluía o Form Interpreter, uma ferramenta para analisar sintaticamente consultas de
SQL.
Em meados de 1997, o PHP estava sendo utilizado mundialmente em aproximadamente 50.000
sites. Obviamente estava se tornando muito grande para uma única pessoa administrar, mesmo para
alguém concentrado e cheio de energia como Rasmus. Agora uma pequena equipe central de
desenvolvimento mantinha o projeto sobre o modelo de “junta benevolente” do código-fonte aberto, com
contribuições de desenvolvedores e usuários em todo o mundo. Zeev Suraski e Andi Gutmans, dois
programadores israelenses que desenvolveram os analisadores de sintaxe PHP3 e PHP4, também
generalizaram e estenderam seus trabalhos sob a rubrica de Zend.com (Zeev, Andi, Zend, entendeu?).
O quarto trimestre de 1998 iniciou um período de crescimento explosivo para o PHP, quando todas
as tecnologias de código-fonte aberto ganharam uma publicidade intensa. Em outubro de 1998, de acordo
com a melhor suposição, mais de 100.000 domínios únicos utilizavam PHP de alguma maneira. Um ano
depois, o PHP quebrou a marca de um milhão de domínios. Enquanto escrevo esta apostila, o número
explodiu para cerca de dois milhões de domínios.
O que pode ser feito com PHP?
Basicamente, qualquer coisa que pode ser feita por algum programa CGI pode ser feita também
com PHP, como coletar dados de um formulário, gerar páginas dinamicamente ou enviar e receber cookies.
PHP também tem como uma das características mais importantes o suporte a um grande
número de bancos de dados, como dBase, Interbase, mSQL, mySQL, Oracle, Sybase, PostgreSQL e vários
outros. Construir uma página baseada em um banco de dados torna-se uma tarefa extremamente simples
com PHP.
Além disso, PHP tem suporte a outros serviços através de protocolos como IMAP, SNMP, NNTP,
POP3 e, logicamente, HTTP. Ainda é possível abrir sockets e interagir com outros protocolos.
2. Sintaxe Básica
Delimitando o código PHP
O código PHP fica embutido no próprio HTML. O interpretador identifica quando um código é PHP pelas
seguintes tags:

<?php
comandos
?>
<script language=”php”>
comandos
</script>
<?
comandos
?>
<%
comandos
%>
O tipo de tags mais utilizado é o terceiro, que consiste em uma “abreviação” do primeiro. Para utilizá-lo, é
necessário habilitar a opção short-tags na configuração do PHP. O último tipo serve para facilitar o uso por
programadores acostumados à sintaxe de ASP. Para utilizá-lo também é necessário habilitá-lo no arquivo
de configuração do PHP (php.ini)
Separador de instruções
Para cada fim de linha de código tem que haver um ponto e vírgula, indicando ao sistema fim de instrução.
Exemplo.
<?
echo 'com ponto e vírgula' ;
?>
Linhas de comando, de controle, não precisam de ponto e vírgula.

Exemplo.:
<?
if ($x == $x){ //aqui não precisa de ponto e vírgula
echo 'com ponto e vírgula' ; //aqui precisa de ponto e vírgula
}
?>
Nomes de variáveis
Toda variável em PHP tem seu nome composto pelo caracter $ e uma string, que deve iniciar por uma letra
ou o caracter “_”. PHP é case sensitive, ou seja, as variáveis $php e $PHP são diferentes. Por isso é
preciso ter muito cuidado ao definir os nomes das variáveis. É bom evitar os nomes em maiúsculas, pois
como veremos mais adiante, o PHP já possui alguma variáveis pré-definidas cujos nomes são formados por
letras maiúsculas.
Comentários
Há dois tipos de comentários em código PHP:
Comentários de uma linha:
Marca como comentário até o final da linha ou até o final do bloco de código PHP - o que vier antes. Pode
ser delimitado pelo caracter “#” ou por duas barras ( // ).
Exemplo:
<? echo “teste”; #isto é um teste
echo “teste”; //este teste é similar ao anterior
?>
Comentários de mais de uma linha:
Tem como delimitadores os caracteres “/*” para o início do bloco e “*/” para o final do comentário. Se o
delimitador de final de código PHP ( ?> ) estiver dentro de um comentário, não será reconhecido pelo
interpretador.
Exemplos:
<?
echo “teste”; /* Isto é um comentário com mais
de uma linha que funciona corretamente
*/
?>

FORMATOS DE IMAGEM
Durante os anos, foram criados centenas de formatos de arquivo de imagem. Conforme as
demandas, como exibir imagens na Web. Alguns, como Fotografia CD, ganham larga aceitação. Outros
geram muita excitação e então desaparecem. Nós exploraremos formatos que você provavelmente vai usar
ou encontrar.
TIFF (.TIF)
TIFF (Tag Image File Format), pronunciado "tiff", foi desenvolvido originalmente pela Aldus Corporation
para salvar imagens criadas por scanners, frame grabbers e programas que editam fotografia. Este formato
foi aceitado e apoiado amplamente como um formato de transferência de imagem não amarrado a
hardware de computador. O TIFF também é um formato popular para aplicações de publicação. Existem
muitas variações do formato, chamadas extensões, assim você pode ter problemas ocasionais ao abrir um
de outra fonte.
Algumas versões são comprimidas usando o LZW ou outros métodos de lossless. Arquivos TIFF suportam
cores de até 24-bit .
PICT (.PIC)
O PICT formato, pronunciado "pick", foi introduzido junto com o software MacDraw para o Macintosh. Se
tornou desde então um padrão de Macintosh .
EPS (.EPS)
Arquivos EPS (Encapsulated PostScript), pronunciado uma letra de cada vez " E-P-S, " usa um formato
desenvolvido pela Adobe para impressoras de PostScript. Estes arquivos geralmente têm duas partes. A
primeira é uma descrição de texto que diz a uma impressora de PostScript como fazer para produzir uma
imagem. A segunda é uma imagem bit-map. Uma vez uma imagem salvada no formato de EPS, você pode
importá-la em outros programas e pode dimensioná-la como quizer. Porém, seu conteúdo é freqüentemente
não editável exceto através de alguns programas como o Ilustrador da Adobe. Por isto, estes arquivos
geralmente são criados ao término do processo quando eles são próximos de serem incorporados em uma
publicação impressa.
BMP (.BMP)
Arquivos BMP, pronunciado uma letra de cada vez " B-M-P " usam um formato bitmap do Windows. Estas
imagens são armazenadas em um formato dispositivo-independente bitmap (DIB), que permite ao Windows
exibir o bitmap em qualquer tipo de dispositivo de exibição. O termo " independente de dispositivo " significa
que o bitmap especifica a cor do pixel em uma forma independente do método usado por um dispositivo de
exibição para representar a cor estes arquivos são encontrados em dois formatos:
O formato OS/2 não é comprimido (RGB codificado). Código RGB apoia cores de 24-bit .
Arquivos Windows BMP e de DIB podem ser salvados sem usar qualquer compressão (RGB codificado), ou
usando a run length encoded, compressão de lossless (RLE codificado). RLE apóia só 256 cores.
O que é um DIB?
O Windows pode armazenar dados de cor junto com a imagem em questão. Quando salvadas deste modo,
as imagens são chamadas Microsoft Device
Independent Bitmap, ou DIB. Quando gravada em um arquivo, ela estará no Formato Microsoft Bitmap, ou
BMP. Referências ao formato de arquivo DIB na verdade se referem a BMP.
O que é RLE
Arquivos Windows RLE são o arquivos Windows de DIB que usam compressão de RLE. Usando
compressão de RLE para salvar uma imagem como um DIB ou BMP, produz um arquivo de RLE. A única
diferença é a extensão do nomedo arquivo.
JPEG (.JPG)
O formato JPEG (Joint Photographic Experts Group), pronunciado "jay-peg" é sem dúvida o formato mais
popular para exibição de imagens fotográficas na Web. O termo "JPEG" freqüentemente é usado para
descrever o formato de arquivo JFIF (JPEG File Interchange Format). JFIF é realmente o formato de arquivo
que contém uma imagem comprimida com o método JPEG. Estes novos arquivos JFIF originalmente
usavam a extensão JPG, porém, os padrões mais recentes pedem por usar uma extensão JIF. O formato é
aperfeiçoado para a exibição de fotografias e não trabalha tão bem quanto o GIF para desenhos de linha
(GIF é aperfeiçoado para eles). Imagens de JPEG têm duas características distintas:
JPEG usa um esquema de compressão de lossy, mas você pode variar a quantia de compressão e
conseqüentemente pode trocar tamanho de arquivo por qualidade de imagem e pode até mesmo obter
arquivos extremamente pequenos com qualidade pobre.

JPEG apóia cor de 24-bit . GIF, o outro formato extensamente usado na Web apóia só 8-bits.
Compressão é executada em blocos de pixels de oito em cada lado. Você pode ver estes blocos quando
você usa os níveis mais altos de compressão ou aumenta muito a imagem. JPEG é um processo de dois
estágios com algoritmos de compressão e descompressão. Isto significa que ele leva mais muito tempo
para carregar e exibir que um arquivo de gif. Você pode salvar imagens em um formato JPEG progressivo
que trabalha um pouco como um GIF interlaçado. Enquanto um JPEG padrão carrega de cima para baixo,
um JPEG progressivo exibe a imagem inteira que começa com os blocos maiores. Isto permite exibir a
imagem primeiro em baixa resolução e então preenche-la quando mais dados chegam. Quando você salva
uma imagem neste formato, você pode especificar o número de escaneamentos progressivos. Não use
JPEG para salvar imagens originais que você espera modificar depois. Toda vez que você abre um destes
arquivos, e então salva novamente, a imagem será comprimida. Quando você passa por uma série de
salvamentos, a imagem é degradada cada vez mais. Esteja seguro de salvar seus originais em um formato
loss-free como TIFF ou BMP com máxima intensidade de cor. Também, quando você salva uma imagem
como um JPEG, a imagem na tela não refletirá a compressão a menos que você carregue a versão salva.
Quando você tira uma fotografia com uma máquina fotográfica digital, informação de exposição como
velocidade de obturador e abertura é salva em um cabeçalho no arquivo da imagem. O PIE é uma utilidade
de arquivo que extrai a informação da máquina fotográfica através do arquivo .jpg original e renomeia o
nome de arquivo do tipo PIC000XX.JPG para um nome mais amigável indicando a data e hora, como
também outras informações da fotografia. Basicamente existem dois padrões para informação de fotos: O
compatível com Olympus/Sanyo/Casio eo padrão EXIF. A maioria das máquinas fotográficas novas é
compatível com o EXIF, mas ainda existem outras informações específicas de máquina fotográfica, como
valores de zoom ou modos de qualidade.
PNG (.PNG)
PNG (Portable Network Graphics), pronunciado "ping", foi desenvolvido para substituir o envelhecido
formato GIF e é apoiado pelo Microsoft Internet Explorer e Netscape Navigator. O PNG, como o GIF é um
formato de lossless, mas tem algumas características que o formato de GIF não possui. Estes incluem 254
níveis de transparência (GIF apóia um único), mais controle em sobre o brilho da imagem, e apoio para
mais de 48 bits por pixel. (GIF suporta 8 para 256 cores). PNG também suporta distribuição progressiva,
como os GIFs interlaçados fazem e tende a comprimir melhor que um GIF.
GIFs (.GIF)
Imagens de formato GIF (Graphics Interchange Format), pronunciado"jiff", são extensamente usadas na
Web mas mais para arte de linha, não para imagens fotográficas. Este formato acumula 256 cores de uma
imagem em uma tabela chamada de paleta. Considerando que imagens têm milhões de cores, um
programa como PhotoShop seleciona o melhor para representar o todo quando você salva a imagem neste
formato. Quando exibida, cada pixel na imagem é mostrado como uma das cores da tabela, muito
semelhante a pintar através de números.
Há duas versões de GIF em uso na Web; o original GIF 87a e um mais novo GIF 89a. Ambas as
versões podem usar interlaçado; armazenando imagens que usam quatro passagens em vez de uma.
Normalmente, quando uma imagem é exibida em um browser, é transmitido uma fila de cada vez,
começando com a fila de topo e preenchendo a página. Quando salvo como um GIF interlaçado, primeiro é
enviado no seu tamanho mas com uma muito baixa resolução. Isto permite para uma pessoa ter uma idéia
do conteúdo da imagem antes que esta seja completamente transmitida. Como mais pixels são enviados
nas próximas três passagens, a imagem vai se enchendo e alcança sua resolução total. O GIF da mais
nova versão 89a adiciona um pouco de capacidades que incluem o seguinte:
Fundos de imagem podem ser feitos transparente. Para fazer isto, você especifica qual cor na
tabela será transparente. Quando visto com um browser de Web, o browser substitui todo pixel na imagem
que é esta cor por um pixel do fundo da página da Web. Isto permite o fundo se mostrar através da imagem
nessas áreas, como se as áreas fossem transparentes. Você tem que escolher a cor transparente
cuidadosamente. Se você seleciona uma que esta em qualquer lugar na imagem, além do fundo, sua
imagem parecerá ter " buracos " nela.
Imagens podem ser animadas . Através de uma série de imagens, objetos podem ser animados
como um filme simula movimento usando uma série de imagens. Isto fica melhor com desenhos de linha
mas também pode ser feito com fotografias. Dependendo da sua rapidez de conexão com a Web, a
animação pode não trabalhar na primeira vez. Porém, uma vez é salva em memória cache e vista de novo,
trabalhará bem.
Imagens GIF estão limitadas a um máximo de 256 cores. Estas cores, armazenadas em uma tabela, index
ou paleta, são freqüentemente chamadas de cores indexadas. Quando você converte uma fotografia para
o formato GIF, a maioria dos programas de gráficos lhe permitirá usar dither nela. Isto substitui cores
perdidas com padrões disponíveis na paleta. O dither melhora a aparência da imagem, mas também
aumenta o tamanho do arquivo. Embora fotografias de GIF sejam freqüentemente visualizadas muito bem

em tela, elas sofrem se comparadas lado-a-lado com imagens salvas em JPEG e outros formatos. O
formato de GIF é melhor usado para o que se chama "line art" (desenhos a pico-de- pena) como
caricaturas, gráficos, esquemas, logotipos e texto que têm um número limitado de cores e limites distintos
entre regiões de cor.
Imagens de GIF são comprimidas usando uma forma de "lossless" de compressão chamada LZW (Lempel-
Ziv-Welch). O nivel de compressão alcançada depende da freqüência de mudanças de cor em cada fila de
pixels. Isto é porque quando dois ou mais pixels têm a mesma cor seguida, eles são registrados como um
único bloco. Conseqüentemente, um quadro de faixas horizontais comprimirá mais que um de faixas
verticais, porque as linhas horizontais seriam armazenadas como um único bloco. Fotografias com áreas
grandes de cores idênticas como céus, nuvens e assim por diante, comprimirão mais que imagens com
muitas cores e padrões. Para salvar uma imagem de 24 bits como um GIF, você tem que reduzir a
profundidade do bit até 8 bits. Para reduzir tamanhos de arquivo em formatos GIF, você pode reduzir o
número de cores na imagem. Isto é difícil com a maioria das fotografias, mas não com desenhos. Por
exemplo, se sua imagem tem 16 ou menos, você pode converte-la para uma paleta de 4-bit (16-cores) . A
maioria dos programas de gráficos lhe permitirá fazer isto. Até mesmo com fotografias você às vezes pode
reduzir a imagem para menos cores sem perda notável. As cores descartadas são aquelas que são
raramente usadas ou transitivas entre cores mais freqüentes. Quando trabalhando com imagens de escalas
de cinza, o GIF trabalha tão bem quanto o JPEG porque quase todos programas usam 8-bits (256 cores)
para imagens de escalas de cinza
Banco de imagens
Data:26/09/2003
Por:Fábio Cavalcante
Abaixo uma lista com 30 bancos de imagens online, para pesquisa e/ou compra de imagens para
trabalhos impressos ou publicados na internet.
http://www.sxc.hu http://www.freeimages.com/
http://www.grupokeystone.com.br http://www.istockphoto.com/
http://www.thousandimages.com http://www.arraich.com/freephotos.htm
http://www.lost.art.br http://openphoto.net/
http://gal.mvc.ru/ http://www.imagecase.com/
http://www.ditto.com/ http://pigallery.designheaven.com/
http://www.gograph.com/ http://www.nasa.gov/gallery/photo
http://www.airliners.net/ http://www.freefoto.com/
http://www.snap-shot.com/ http://www.freeimages.co.uk/
http://animalpicturesarchive.com/ ttp://www.photonica.com/
http://www.1000skies.com/ http://www.imageafter.com
http://www.getthepixel.com/ http://www.gettyimages.com
http://www.visipix.com http://stock.b-man.dk
http://www.webshots.com/ http://gallery.hd.org/
http://www.bigfoto.com/ http://freestockphotos.com/
Histórico Java:
Java foi criado como parte de um grande projeto da Sun Microsystems, Inc., cuja missão era
desenvolver aplicativos complexos e avançados para aplicação em pequenos dispositivos eletrônicos.
Esses dispositivos são sistemas portáveis, distribuídos, confiáveis e incorporados em tempo real, dirigidos
aos consumidores em geral. As primeiras tentativas de criação de tais dispositivos receberam nomes como:
Digital
Assitence e Portable Data Assistentes(PDAs).
Primeira tentativa da Sun, como esse aplicativos deveria ter sido implementada em C++. Mas em
conseqüência de compilações horríveis e uma lista cada vez maior de problemas com o C++ -
principalmente vazamentos de memória e vários problemas de herança - a Sun enterrou o C++ e
implementou uma nova linguagem, o Java. Desde o seu início em 1992, surgiram muitas outras aplicações
para o Java. O Java tem a capacidade de criar programas auxiliares, que podem ser usados para montar
documentos HTML particularmente interessantes.
Características da Linguagem:
Java é orientado a objetos: O Java é um membro do paradigma orientado a objetos (OO) das
linguagens de programação, tudo em Java é objeto. As linguagens que aceitam este paradigma, como Java
e C++, seguem a mesma filosofia básica, mas diferem em sintaxe e estilo. As linguagens orientadas a

objetos oferecem muitas vantagens sobre as linguagens procedurais tradicionais. Como os objetos
encapsulam dados e funções relacionados em unidades coesas, é fácil localizar dependências de dados,
isolar efeitos de alterações e realizar outras atividades de manutenção, talvez o mais importante, as
linguagens OO facilitam a reutilização.
Não existem variáveis globais ou funções independentes. Toda variável ou método pertence a uma
classe ou objeto e só pode ser invocada através dessa classe ou objeto.
Java é distribuído: Distribuição de informações para compartilhamento e trabalho conjunto, com a
distribuição de carga de trabalho do processamento, é uma característica essencial dos aplicativos
cliente/servidor.
Felizmente para os programadores Java, há uma biblioteca de procedimentos TCP/IP incluída nos códigos-
fonte e de distribuição binária do Java. Isso facilita aos programadores o acesso remoto às informações,
usando protocolos como HTTP e FTP.
Java é compilado e independente de plataforma: Um programa escrito em Java precisa ser
compilado antes de ser executado. O compilador traduz o código-fonte e gera arquivos objeto chamados
arquivos de classe.
Cada programa Java consiste da implementação de uma única classe. Depois de compilado, pode
ser executado em qualquer plataforma onde exista um sistema de tempo de execução Java (runtime). A
compilação de um programa em C++ realiza a tradução do código-fonte da linguagem em instruções que
são interpretadas pelo microprocessador da máquina onde foi compilado. O programa então só roda em
outra máquina que tenha o mesmo tipo de processador. Já um programa em Java, quando compilado, gera
instruções (chamadas de byte-codes) para um microprocessador virtual. Existem implementações desse
microprocessador virtual para várias plataformas e o programa então rodará em qualquer uma delas. Por ter
suas instruções interpretadas por um software (processador virtual), os programas em Java são mais lentos
que os escritos em C ou C++. A igualdade é atingida usando microprocessadores virtuais com compiladores
Just-In-Time (JIT), que já são bastante comuns.
Esse tipo de sistema, converte as instruções em byte-codes para instruções do microprocessador na hora
da execução, fazendo com que programas escritos em Java não tenham grandes perdas de desempenho
em relação a programas escritos em C ou C++.
Java é multitarefa: Os objetos binários de códigos de bytes do Java são formados por seqüências de
execução múltiplas e simultâneas. Essas seqüências são conhecidas como contextos de execução ou
processos leves.
As linguagens C e C++ são membros de um paradigma de execução em seqüência única, por não
oferecerem suporte a seqüências no nível de linguagem. O
Java, no entanto, oferece suporte no nível de linguagem para multitarefa, resultando em uma abordagem de
programação mais poderosa e de múltiplas utilidades.
Java é dinâmico: A linguagem Java foi projetada para se adaptar a um ambiente dinâmico, em
constante evolução. Possui uma representação de tempo de execução que permite que o programa saiba a
classe a que pertence um objeto, na hora em que o recebe, durante a execução. Isso permite a inclusão
dinâmica de classes que podem estar em qualquer lugar da Internet. Java também suporta a integração
com métodos nativos de outras linguagens. Desta forma, podem surgir em breve aplicativos híbridos em
Java e C++, aproveitando o grande volume de código existente hoje em C++.
Java é robusto: Quanto mais robusto um aplicativo, mais confiável ele será. Isso é desejável tanto para os
desenvolvedores de software quanto aos consumidores. A maioria das linguagens OO, como o C ++ e Java,
possuem tipos bastante fortes. Isso significa que a maior parte da verificação de tipos de dados é realizada
em tempo de compilação, e não em tempo de execução. Isso evita muitos erros e condições aleatórias nos
aplicativos. O Java, ao contrário do C++, exige declarações explícitas de métodos, o que aumenta a
confiabilidade dos aplicativos.
Java é seguro: Como o Java foi criado para ambientes de rede, os recursos de segurança receberam muita
atenção. Por exemplo, se você executar um binário transferido por download da rede, o mesmo poderá
estar infectado por vírus. Os aplicativos Java apresentam garantia de resistência contra vírus e de que não
são infectados por vírus, pois não são capazes de acessar heaps, stacks ou memória do sistema. No Java,
a autenticação do usuário é implementada com um método de chave pública de criptografia. Isso impede de
maneira eficaz que hakers e crakers examinem informações protegidas como nomes e senhas de contas.
Java é simples: Um dos principais objetivos do projeto do Java foi criar uma linguagem o mais próxima
possível do C ++, para garantir sua rápida aceitação no mundo do desenvolvimento OO.
Outro objetivo do seu projeto foi eliminar os recursos obscuros e danosos do C ++, que fugiam à
compreensão e aumentavam a confusão que poderia ocorrer durante as fases de desenvolvimento,
implementação e manutenção do software. O Java é simples porque é pequeno. O interpretador básico do

Java ocupa aproximadamente 40k de RAM, excluindo-se o suporte a multitarefa e as bibliotecas padrão,
que ocupam outros 175k. Mesmo a memória combinada de todos esses elementos é insignificante, se
comparada a outras linguagens e ambientes de programação.
Java oferece alto desempenho: Há muitas situações em que a interpretação de objetos de

códigos de bytes proporciona desempenho aceitável. Mas outras circunstâncias exigem desempenhos mais
altos. O Java concilia tudo isso oferecendo a tradução dos códigos de bytes para o código de máquina
nativo em tempo de execução. O alto desempenho permite a implementação de seus aplicativos WEB em
Java, na forma de programas pequenos e velozes, que podem ampliar significativamente os recursos tanto
do cliente quanto do servidor.
Aquisição: Existem 3 navegadores que suportam Java:
O HotJava é um navegador desenvolvido pela Sun Microsystems para divulgar a linguagem Java e suas
aplicações;
O Netscape Navigator3.0 ou superior, da Netscape Communications;
O Microsoft Internet Explorer 3.0 ou superior(MSIE).
Seja qual for o navegador selecionado, ele é grátis para utilização não comercial e pode ser obtido
Dicas de Consultores:
Segredos sobre design de site
Data:30/09/2003
Por:Bruno Ávila, brunoavila@brunoavila.com.br
Quero dividir com vocês alguns segredos sobre criação de sites. Como
são muitos segredos que guardo nesses 6 anos de profissão, achei
melhor dividir em alguns artigos.
Nesse primeiro artigo irei abordar dois assuntos interessantes: a
importância da primeira página e a polêmica largura do site.
Espero que essas dicas e soluções venham a ajudar vocês clientes,
empresários, webdesigners e os interessados pelo assunto. Vamos
então apresentar o primeiro tópico dessa jornada:
Primeira Página
A primeira página de um site pode ter muitos nomes: home, homepage, página inicial, início, index ou
simplesmente primeira página. Essa, sem dúvida, é a página mais importante do website, pois ela irá
responder à primeira pergunta que todo internauta faz quando entra no seu site: "Onde estou?". E
responderá também à segunda pergunta: "Para que serve esse site?".
Mesmo sendo a página mais importante vejo muitos sites por aí que não dão muita bola para ela,
tratando essa página como todas as páginas internas.
Para que a página inicial cumpra sua função é necessário fazer dela um ponto de entrada para todo
o conteúdo das páginas internas, com destaques do conteúdo que interessa seu público no seu centro, o
mesmo valendo para novidades, notícias ou promoções especiais.
Coloque imagens que se ligam ao produto ou serviço que você aborda no site. Isso irá facilitar muito a
resposta da pergunta "Onde estou?".
Um sistema de busca se mostra bastante eficaz, principalmente, quando se trata de um site com
muito conteúdo, pois muitos internautas não estarão nem um pouco afim de encontrar a informação que
procuram clicando em links e mais links.
Largura do site
Esse assunto se mostrou bem polêmico nos últimos anos. Vou falar sobre minha experiência com
esse tipo de problema.
A largura da página depende bastante dos seguintes fatores: resolução de vídeo, barra iniciar oculta
ou não, tamanho dos icones do navegador e etiquetas de texto dos botões ativadas ou não.
Tudo isso você deve prever na hora da criação do layout. Um usuário pode usar resolução 800 x 600
enquanto o outro 1024 x 768 ou então dois usuários podem usar a mesma resolução 800 x 600 mas um
utilizando a barra de iniciar fixa e com botões do navegador grandes e outro com barra de iniciar oculta e
botões menores ganhando mais espaço no navegador.
Como adivinhar tudo isso? O usuário tem uma gama de possibilidades de configurações de vídeo,
tornando impossível força-lo a visualizar seu site do jeito que você quer.
Para isso temos as seguintes soluções:

1. Criar layouts para resolução mínima de 800 x 600: para isso é necessário considerar o tamanho de
tela do navegador supondo uma barra fixa no menu iniciar do windows, o tamanho default dos botões do
navegador e uma possível barra de rolagem vertical. Prevendo isso, crie seu layout na resolução 776 x 460
para ser bem visualizado em 800 x 600 e resoluções superiores. A resolução de 640 x 480 deixou de ser
utilizado pela maioria dos internautas mas cuidado pois cada vez mais aparecem usuários de palmtop e
handhelds conectados a Internet. Creio que no futuro essa questão ficará mais complicada pois o número
desses usuários tende a crescer a cada ano.
2. Utilizar um layout "líquido", aquele que se auto ajusta a qualquer resolução através de tabelas com
larguras definidas em porcentagem. O que vai contra esse tipo de montagem de página é a perda de
diversos recursos de layout como alguns tipos de imagens de topo e menu, além de dispersar as
informações e deixar tudo muito vazio quando se está em altas resoluções.
3. Crie um fundo para um layout previsto para 800 x 600 que deixe contínuo algumas figuras,
independente da resolução.
Não tente colocar todo o conteúdo da página em 776 x 460 quando se trata de um portal de notícias
ou algo semelhante onde são necessários muitos destaques e um menu extenso. A barra vertical pode ser
chata, mas é inevitavelmente necessária nesses casos. Por isso não se amarre na altura de 460 pixels
quando se quer trabalhar uma primeira página com muitos destaques, fotos e chamadas
indispensáveis a um portal de notícias.
Gerando boas sensações pelo design
Data:23/04/2003
Por:Caio Cunha
Quando estava iniciando no caminho da Internet, não havia cursos e faculdades especializadas na
área. Sendo assim, resolvi fazer Arquitetura e Urbanismo, pois possuía grande ligação com design.
Nesta faculdade aprendi a ver o design de forma mais humana. Comecei a perceber, que além do
projeto, é necessário gerar sensações agradáveis às pessoas, fazendo com que elas se sintam seguras e
confortáveis.
É emocionante criar um padrão visual que consiga transmitir boas sensações. Mas o importante é
determinar essa identidade visual em uma obra.
Isso também serve para criação de sites para a Internet. Definir uma identidade visual para um site
é fundamental.
Todos os elementos devem se identificar com o conjunto gráfico do site. Quando a home e as
páginas internas de um site possuem uma identidade entre si, gera conforto ao usuário por transmitir a idéia
de segurança. Pois, o usuário vai saber sempre onde está.
No entanto, mesmo seguindo um padrão, as páginas devem ter diferenças entre elas, para não
cansar o usuário e para que ele perceba que o assunto é outro.
Há três fatores marcantes numa identidade visual: cores, tipografia e imagens. E, por isso, é
necessário muito cuidado com estes elementos.
* Cores: Se o site tem uma cor forte, deve-se evitar utilizar esta cor em todo o site. O ideal é usar a cor na
página inicial, por exemplo, e em detalhes nas páginas internas.
* Tipografia: Deve-se utilizar no máximo três tipos de fonte num site. Uma fonte para os títulos,
acompanhando o logotipo da empresa, outra para os textos e uma terceira apenas se houver necessidade.
* Imagens: As fotografias devem ter o mesmo tipo de corte, de tratamento gráfico, de cores, enfim, devem
fazer parte de uma família.
O visual de uma marca fica cada vez mais fortalecido com a correta utilização de elementos de
identidade visual.
Quanto mais o usuário se deparar com elementos que transmitam o mesmo conceito, mais forte
ficará no subconsciente dele a idéia sobre o produto ou serviço que a empresa estará oferecendo.
Seja na Internet ou na arquitetura, o design sempre será uma ferramenta para gerar boas sensações às
pessoas.
Este ponto não é o fim... é sim o início de uma nova caminhada de
uma busca continua por recursos técnicos que vão compor a
formação técnica de cada um que por aqui passou..
SMR

Curso de Formação e Soluções Web

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso de Formação e Soluções Web

Enviado por

Direitos autorais:

Formatos disponíveis

Casa e Cia Frontpage – 1

Software produzido por Microsoft

Visa formar profissionais autônomos, aptos a atuarem na elaboração, composição, edição e

Casa e Cia Frontpage – 2

Casa e Cia Frontpage – 3

Casa e Cia Frontpage – 4

Veja o exemplo de uma página:

Uma estrutura de HTML é dividida da seguinte maneira:

Divisão da tela em frames :

Casa e Cia Frontpage – 5

Cor - Aqua- Código - #70db93 Cor - Blue - Código - #0000ff

*Os códigos e os comandos podem ser representados em letras maiúscula ou minúscula.

Diferentes editores de HTML:

Casa e Cia Frontpage – 6

uma estrutura de HTML. Uma estrutura de PHP Uma estrutura de ASP

Casa e Cia Frontpage – 7

Conceitos de Java, Xml e Java script:

Bancos de Dados e formulários:

O projeto como inicio de tudo:

Casa e Cia Frontpage – 8

Respeite as convenções de layout de leitura da informação.

5.1 Hierarquia de Informação

5.2 Foco e Ênfase

5.3 Estrutura e Equilíbrio

5.4 Relacionamento de Elementos

5.6 Unidade e Integração

Casa e Cia Frontpage – 9

Arranjo simétrico - Composição que apresenta elementos semelhantes em ambas as metades.

Casa e Cia Frontpage – 10

Iniciando o FrontPage 2000:

Para iniciar o FrontPage 2000 clique no ícone do

O FrontPage é um completo editore de Páginas Web, simples versátil e de fácil aplicação.

Barra de ferramentas do FrontPage:

Configurações básicas do FrontPage:

Frame e páginas em branco:

O FrontPage é um programa que oferece diversas Folhas de estilos diferentes. Quando

Casa e Cia Frontpage – 13

Em cada página de quadro vemos a seguinte descrição:

Casa e Cia Frontpage – 14

Casa e Cia Frontpage – 15

Casa e Cia Frontpage – 16

O FrontPage trás três guias de visualizações localizadas na barra de tarefas no pé da pagina.

Casa e Cia Frontpage – 17

Casa e Cia Frontpage – 18

O editor de imagens e suas vantagens.

Alguns editores de imagens, textos e programas para suporte ao Frontpage:

Casa e Cia Frontpage – 19

Digitando textos, inserindo imagens e componentes no FrontPage.

O texto ficará com no exemplo abaixo:

O texto ficará com no exemplo abaixo:

Casa e Cia Frontpage – 20

O comando inserir imagem ou

Para a edição de textos e imagens sempre é possível acessar as

Plano de fundo (Backgrounds) com imagens:

Cuidados com o seu Plano de fundo:

Casa e Cia Frontpage – 21

Exibindo a barra de ferramentas de Imagem:

Para inserir uma figura, do Clip-arts ou de um

Criando uma imagem mapeada (Área interativa):

Casa e Cia Frontpage – 22

Criando um texto sobre a imagem:

Casa e Cia Frontpage – 23

Tornando uma cor de imagem transparente: