aprenda a fazer um site -...
TRANSCRIPT
AApprr ee nn ddaa aa FFaa zzee rr uu mm SSii tt ee
Moacutedulo I
Parabeacutens por adquirir um curso dos Cursos 24
Horas Vocecirc estaacute investindo no seu futuro Noacutes
esperamos que o curso traga os melhores
resultados possiacuteveis
Atenciosamente
Equipe Cursos 24 Horas
2
IInnttrroodduuccedilccedilatildeatildeoo
O que eacute WWW
A definiccedilatildeo oficial descreve o World-Wide Web como uma iniciativa de busca
de informaccedilatildeo hipermiacutedia a longa distacircncia visando dar acesso a um vasto
universo de documentos O que o projeto World Wide Web (WWW W3) fez foi
permitir que usuaacuterios em redes de computadores com um meacutetodo de acesso
compatiacutevel pudessem acessar inuacutemeras miacutedias de maneira simples Usando uma
interface chamada Mosaic o projeto Web mudou a maneira das pessoas verem e
criarem informaccedilatildeo - foi criada entatildeo a primeira rede hipermiacutedia global
COMO FOI CRIADA A WEB
A histoacuteria da Web comeccedilou em Marccedilo de 1989 quando Tim Berners-Lee do
CERN (uma organizaccedilatildeo Europeacuteia de pesquisadores de Fiacutesica em altas-energias)
propocircs que o projeto fosse usado como um meio de transportar efetivamente
pesquisa e ideacuteias atraveacutes da organizaccedilatildeo A comunicaccedilatildeo a esse niacutevel era um
objetivo do CERN haacute muitos anos uma vez que os seus membros localizam-se
em diversos paiacuteses
COMO FUNCIONA A WEB
A Web funciona segundo o popular modelo cliente-servidor Um servidor Web
eacute um programa cujo uacutenico propoacutesito eacute servir documentos para os clientes quando
requerido Um cliente Web eacute um programa que faz a interface com o usuaacuterio e
realiza pedidos de documentos a um servidor especificado pelo usuaacuterio A carga
causada pelo servidor normalmente eacute pequena uma vez que natildeo realiza nenhum
processamento pesado e soacute opera quando um documento eacute pedido pelo cliente
Aqui estaacute um exemplo de como o processo funciona
3
1 Atraveacutes de um cliente Web (tambeacutem chamado de browser) o usuaacuterio
seleciona uma parte do hipertexto ligada a outro documento - The History of
Computers
2 O cliente Web conecta-se a um computador especificado por um endereccedilo em
algum lugar da Internet e pede ao servidor Web desse computador pelo
documento The History of Computers
3 O servidor responde enviando o texto e qualquer outro elemento de miacutedia
existente no documento (figuras sons ou filmes) para a tela do usuaacuterio
DICAS PARA CRIAR UM BOM SITE
Criar um site eacute muito simples graccedilas agraves facilidades que o FrontPage oferece
Poreacutem um site bem elaborado exige paciecircncia dedicaccedilatildeo e conhecimentos de
algumas teacutecnicas Procure lembrar sempre que um bom site aleacutem de ter uma
aparecircncia atraente necessita que a mensagem seja transmitida de forma sucinta
e sem demora no aparecimento das informaccedilotildees na tela Fique atento agraves
seguintes dicas
Defina os seus objetivos de forma clara
Analise o perfil de quem iraacute visitar seu site
Utilize itens que possam ser exibidos rapidamente na tela
Crie um bom layout de forma a tornaacute-lo bastante atraente
Evite excesso de informaccedilotildees numa uacutenica paacutegina
A cada dia verificamos que a informaccedilatildeo eacute uma ferramenta de extrema
necessidade em qualquer negoacutecio Sabendo disto diversas empresas investem
em tecnologias que possibilitam a transmissatildeo de tais informaccedilotildees Um dos meios
de transmissatildeo mais divulgado na miacutedia de forma geral eacute a Internet e esta
produziu tendecircncias como Intranet Atraveacutes destas redes de computadores
funcionaacuterios empresas instituiccedilotildees profissionais liberais e qualquer tipo de
pessoa podem divulgar seus trabalhos e venderem suas ideacuteias praticamente
4
para qualquer parte do planeta Geralmente estas informaccedilotildees satildeo apresentadas
em formas de paacuteginas gravadas em um determinado site (local virtual)
O Microsoft FrontPage 2000 eacute considerado um dos melhores programas na
criaccedilatildeo de Web sites e se vocecirc pensa que precisaraacute dominar alguma linguagem
de programaccedilatildeo para obter sites com aparecircncia profissional ficaraacute surpreso em
saber que o FrontPage eacute capaz de executar automaticamente praticamente todas
as tarefas de programaccedilatildeo
Para prosseguir no curso vocecirc deveraacute adquirir o programa FrontPage 2000 ou
XP outras versotildees tambeacutem servem (FrontPage 97 98 ou express) poreacutem elas
podem natildeo ter todas as funcionalidades aqui demonstradas
O Front Page 2000 eacute parte integrante do Microsoft Office 2000 O Microsoft Office
XP tambeacutem conteacutem uma versatildeo (Front Page 2002) que pode ser utilizada
Verifique se vocecirc jaacute natildeo tem o Office 2000 ou XP na sua maacutequina pois neste caso
a probabilidade eacute grande de que o Front Page jaacute esteja instalado
5
AA EEvvoolluuccedilccedilatildeatildeoo ddaa WWeebb
A Web evoluiu muito nos uacuteltimos anos podemos classificar os sites como
de 1ordf 2ordf ou 3ordf geraccedilatildeo Os requisitos para ser classificado como um site
de terceira geraccedilatildeo estatildeo mais relacionados ao design do que propriamente
agrave tecnologia
A primeira geraccedilatildeo
Os primeiros sites na Web privilegiavam apenas o conteuacutedo e natildeo a
forma Foram criados por cientistas que desejavam compartilhar
suas ideacuteias com outros cientistas Eles eram estritamente lineares e
tinham um miacutenimo de funcionalidade
Na primeira geraccedilatildeo nota-se claramente a limitaccedilatildeo imposta por
modems lentos e monitores monocromaacuteticos Os graacuteficos e textos
eram apresentados sempre de cima para baixo e da esquerda para a
direita Era muito comum o uso de saltos de linhas marcadores e
linhas horizontais como recursos para separar paraacutegrafos
A segunda geraccedilatildeo
No iniacutecio de 1995 foram lanccediladas diversas extensotildees agrave linguagem
HTML no browser Netscape Navigator (que entatildeo dominava sozinho
a web) A evoluccedilatildeo nos sites surgiu na forma de iacutecones imagens de
fundo bototildees com bordas tabelas e graacuteficos mapeados A estrutura
deixa de ser linear para ser apresentada de forma hieraacuterquica quase
sempre atraveacutes de menus com vaacuterios niacuteveis
A maior diferenccedila da segunda geraccedilatildeo para a primeira foi a
substituiccedilatildeo de palavras por elementos graacuteficos As funccedilotildees passam
a ser representadas por iacutecones surgem imagens de fundo ao inveacutes
dos antigos fundos cinzas os graacuteficos coloridos e animados
6
substituem as antigas figuras Cria-se o conceito de home-page
uma paacutegina cheia de desenhos 3D janelas e bototildees que serve de
menu para acessar o restante de um site
Nesta eacutepoca a legibilidade deixou de ser importante Para ter um
bom site era necessaacuterio mostrar uma grande quantidade de truques
teacutecnicos
Sites de terceira geraccedilatildeo
O que diferencia a terceira geraccedilatildeo das demais natildeo satildeo os recursos
tecnoloacutegicos A grande diferenccedila estaacute no design A ideacuteia eacute dar aos
usuaacuterios uma boa sensaccedilatildeo As pessoas mais habilidosas
conseguiram criar sites de terceira geraccedilatildeo usando qualquer browser
graacutefico
Na terceira geraccedilatildeo o conteuacutedo volta ao seu lugar de destaque
Entretanto a forma natildeo eacute mais deixada de lado Haacute uma
preocupaccedilatildeo simultacircnea com funcionalidade e beleza esteacutetica Haacute
grande preocupaccedilatildeo no layout preciso na harmonia entre as cores
na escolha do tipo de letra adequado no uso correto dos graacuteficos e
no tempo para carregar cada paacutegina Acima de tudo haacute um
compromisso de ser agradaacutevel (em todos os sentidos) ao usuaacuterio
Os projetistas destes novos sites utilizam metaacuteforas e modelos
psicoloacutegicos dos consumidores Assim como os arquitetos que fazem
os shopping centers eles passam horas e ateacute dias pensando em
como tornar suas paacuteginas mais atraentes aos seus usuaacuterios
Criar sites de terceira geraccedilatildeo eacute um trabalho aacuterduo que exige
dedicaccedilatildeo e uma grande sentimento daquilo que agrada o seu
puacuteblico-alvo Em geral envolve o trabalho de uma equipe que precisa
7
trabalhar unida para fazer cada paacutegina ser bonita e o site como um
todo funcionar como uma boa experiecircncia para o usuaacuterio
O Restaurante
Eacute interessante a comparaccedilatildeo de um site web com um restaurante
Vocecirc descobre um restaurante atraveacutes de um amigo de um anuacutencio ou passando
por acaso por ele Vocecirc lecirc cartazes ou faixas com ofertas do lado de fora paacutera na
entrada e sente o clima e o cheirinho da comida
Estando na porta vocecirc decide se vai ou natildeo entrar Em um restaurante
popular vocecirc ateacute pode esperar em uma fila para conseguir uma mesa Se
vocecirc ficar seraacute levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc
faz a sua escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obras do chef Vocecirc prova um ou outro item
mistura alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc deixa
uma gorjeta e pode ateacute conversar um pouco com o maitre ou o dono
Depois quando sentir fome novamente poderaacute voltar ou natildeo Estando na
porta vocecirc decide se vai ou natildeo entrar Em um restaurante popular vocecirc
ateacute pode esperar em uma fila para conseguir uma mesa Se vocecirc ficar seraacute
levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc faz a sua
escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obra do chef Vocecirc prova um ou outro item mistura
alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc
deixa uma gorjeta e pode ateacute conversar um pouco com o maitre ou o
dono Depois quando sentir fome novamente poderaacute voltar ou natildeo
8
de acordo com a qualidade da sua primeira experiecircncia de acordo
com a qualidade da sua primeira experiecircncia
Pense na Web como uma cidadezinha aconchegante com alguns milhotildees de
restaurantes
9
IInniicciiaannddoo oo MMSS -- FFrroonnttPPaaggee 22000000
Para iniciar o MS - FrontPage 2000 clique em Iniciar Programas Microsoft Front Page
10
DDeeffiinniiccedilccedilatildeatildeoo ddee aallgguunnss tteerrmmooss uussaaddooss eemm hhoommee ppaaggeess Web page
Paacuteginas satildeo os documentos baacutesicos da internet e satildeo escritas em
HTML (hypertext markup language)
Frame
(Quadro ou moldura) Satildeo modelos de paacuteginas HTML que dividem a
janela do browser em aacutereas definidas chamadas frames (molduras) Cada um dos
frames pode exibir uma paacutegina diferente Clicando em um hyperlink em uma
paacutegina a nova paacutegina usualmente eacute exibida em outro frame (moldura)
Hyperlink
Eacute uma conexatildeo de uma paacutegina com outro local seja uma nova
paacutegina ou uma localizaccedilatildeo diferente na mesma paacutegina O hyperlink pode ser uma
palavra frase uma imagem um arquivo um programa ou um endereccedilo de e-mail
Navigation bar
(barra de navegaccedilatildeo) Eacute um conjunto de hyperlinks usados
para navegaccedilatildeo em um endereccedilo As barras de navegaccedilatildeo podem ter hyperlinks
para outros endereccedilos (sites) ou para uma paacutegina principal dentro de um mesmo
site A barra de navegaccedilatildeo pode ser formada por um conjunto de imagens
identificadas com textos ou apenas por textos
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
2
IInnttrroodduuccedilccedilatildeatildeoo
O que eacute WWW
A definiccedilatildeo oficial descreve o World-Wide Web como uma iniciativa de busca
de informaccedilatildeo hipermiacutedia a longa distacircncia visando dar acesso a um vasto
universo de documentos O que o projeto World Wide Web (WWW W3) fez foi
permitir que usuaacuterios em redes de computadores com um meacutetodo de acesso
compatiacutevel pudessem acessar inuacutemeras miacutedias de maneira simples Usando uma
interface chamada Mosaic o projeto Web mudou a maneira das pessoas verem e
criarem informaccedilatildeo - foi criada entatildeo a primeira rede hipermiacutedia global
COMO FOI CRIADA A WEB
A histoacuteria da Web comeccedilou em Marccedilo de 1989 quando Tim Berners-Lee do
CERN (uma organizaccedilatildeo Europeacuteia de pesquisadores de Fiacutesica em altas-energias)
propocircs que o projeto fosse usado como um meio de transportar efetivamente
pesquisa e ideacuteias atraveacutes da organizaccedilatildeo A comunicaccedilatildeo a esse niacutevel era um
objetivo do CERN haacute muitos anos uma vez que os seus membros localizam-se
em diversos paiacuteses
COMO FUNCIONA A WEB
A Web funciona segundo o popular modelo cliente-servidor Um servidor Web
eacute um programa cujo uacutenico propoacutesito eacute servir documentos para os clientes quando
requerido Um cliente Web eacute um programa que faz a interface com o usuaacuterio e
realiza pedidos de documentos a um servidor especificado pelo usuaacuterio A carga
causada pelo servidor normalmente eacute pequena uma vez que natildeo realiza nenhum
processamento pesado e soacute opera quando um documento eacute pedido pelo cliente
Aqui estaacute um exemplo de como o processo funciona
3
1 Atraveacutes de um cliente Web (tambeacutem chamado de browser) o usuaacuterio
seleciona uma parte do hipertexto ligada a outro documento - The History of
Computers
2 O cliente Web conecta-se a um computador especificado por um endereccedilo em
algum lugar da Internet e pede ao servidor Web desse computador pelo
documento The History of Computers
3 O servidor responde enviando o texto e qualquer outro elemento de miacutedia
existente no documento (figuras sons ou filmes) para a tela do usuaacuterio
DICAS PARA CRIAR UM BOM SITE
Criar um site eacute muito simples graccedilas agraves facilidades que o FrontPage oferece
Poreacutem um site bem elaborado exige paciecircncia dedicaccedilatildeo e conhecimentos de
algumas teacutecnicas Procure lembrar sempre que um bom site aleacutem de ter uma
aparecircncia atraente necessita que a mensagem seja transmitida de forma sucinta
e sem demora no aparecimento das informaccedilotildees na tela Fique atento agraves
seguintes dicas
Defina os seus objetivos de forma clara
Analise o perfil de quem iraacute visitar seu site
Utilize itens que possam ser exibidos rapidamente na tela
Crie um bom layout de forma a tornaacute-lo bastante atraente
Evite excesso de informaccedilotildees numa uacutenica paacutegina
A cada dia verificamos que a informaccedilatildeo eacute uma ferramenta de extrema
necessidade em qualquer negoacutecio Sabendo disto diversas empresas investem
em tecnologias que possibilitam a transmissatildeo de tais informaccedilotildees Um dos meios
de transmissatildeo mais divulgado na miacutedia de forma geral eacute a Internet e esta
produziu tendecircncias como Intranet Atraveacutes destas redes de computadores
funcionaacuterios empresas instituiccedilotildees profissionais liberais e qualquer tipo de
pessoa podem divulgar seus trabalhos e venderem suas ideacuteias praticamente
4
para qualquer parte do planeta Geralmente estas informaccedilotildees satildeo apresentadas
em formas de paacuteginas gravadas em um determinado site (local virtual)
O Microsoft FrontPage 2000 eacute considerado um dos melhores programas na
criaccedilatildeo de Web sites e se vocecirc pensa que precisaraacute dominar alguma linguagem
de programaccedilatildeo para obter sites com aparecircncia profissional ficaraacute surpreso em
saber que o FrontPage eacute capaz de executar automaticamente praticamente todas
as tarefas de programaccedilatildeo
Para prosseguir no curso vocecirc deveraacute adquirir o programa FrontPage 2000 ou
XP outras versotildees tambeacutem servem (FrontPage 97 98 ou express) poreacutem elas
podem natildeo ter todas as funcionalidades aqui demonstradas
O Front Page 2000 eacute parte integrante do Microsoft Office 2000 O Microsoft Office
XP tambeacutem conteacutem uma versatildeo (Front Page 2002) que pode ser utilizada
Verifique se vocecirc jaacute natildeo tem o Office 2000 ou XP na sua maacutequina pois neste caso
a probabilidade eacute grande de que o Front Page jaacute esteja instalado
5
AA EEvvoolluuccedilccedilatildeatildeoo ddaa WWeebb
A Web evoluiu muito nos uacuteltimos anos podemos classificar os sites como
de 1ordf 2ordf ou 3ordf geraccedilatildeo Os requisitos para ser classificado como um site
de terceira geraccedilatildeo estatildeo mais relacionados ao design do que propriamente
agrave tecnologia
A primeira geraccedilatildeo
Os primeiros sites na Web privilegiavam apenas o conteuacutedo e natildeo a
forma Foram criados por cientistas que desejavam compartilhar
suas ideacuteias com outros cientistas Eles eram estritamente lineares e
tinham um miacutenimo de funcionalidade
Na primeira geraccedilatildeo nota-se claramente a limitaccedilatildeo imposta por
modems lentos e monitores monocromaacuteticos Os graacuteficos e textos
eram apresentados sempre de cima para baixo e da esquerda para a
direita Era muito comum o uso de saltos de linhas marcadores e
linhas horizontais como recursos para separar paraacutegrafos
A segunda geraccedilatildeo
No iniacutecio de 1995 foram lanccediladas diversas extensotildees agrave linguagem
HTML no browser Netscape Navigator (que entatildeo dominava sozinho
a web) A evoluccedilatildeo nos sites surgiu na forma de iacutecones imagens de
fundo bototildees com bordas tabelas e graacuteficos mapeados A estrutura
deixa de ser linear para ser apresentada de forma hieraacuterquica quase
sempre atraveacutes de menus com vaacuterios niacuteveis
A maior diferenccedila da segunda geraccedilatildeo para a primeira foi a
substituiccedilatildeo de palavras por elementos graacuteficos As funccedilotildees passam
a ser representadas por iacutecones surgem imagens de fundo ao inveacutes
dos antigos fundos cinzas os graacuteficos coloridos e animados
6
substituem as antigas figuras Cria-se o conceito de home-page
uma paacutegina cheia de desenhos 3D janelas e bototildees que serve de
menu para acessar o restante de um site
Nesta eacutepoca a legibilidade deixou de ser importante Para ter um
bom site era necessaacuterio mostrar uma grande quantidade de truques
teacutecnicos
Sites de terceira geraccedilatildeo
O que diferencia a terceira geraccedilatildeo das demais natildeo satildeo os recursos
tecnoloacutegicos A grande diferenccedila estaacute no design A ideacuteia eacute dar aos
usuaacuterios uma boa sensaccedilatildeo As pessoas mais habilidosas
conseguiram criar sites de terceira geraccedilatildeo usando qualquer browser
graacutefico
Na terceira geraccedilatildeo o conteuacutedo volta ao seu lugar de destaque
Entretanto a forma natildeo eacute mais deixada de lado Haacute uma
preocupaccedilatildeo simultacircnea com funcionalidade e beleza esteacutetica Haacute
grande preocupaccedilatildeo no layout preciso na harmonia entre as cores
na escolha do tipo de letra adequado no uso correto dos graacuteficos e
no tempo para carregar cada paacutegina Acima de tudo haacute um
compromisso de ser agradaacutevel (em todos os sentidos) ao usuaacuterio
Os projetistas destes novos sites utilizam metaacuteforas e modelos
psicoloacutegicos dos consumidores Assim como os arquitetos que fazem
os shopping centers eles passam horas e ateacute dias pensando em
como tornar suas paacuteginas mais atraentes aos seus usuaacuterios
Criar sites de terceira geraccedilatildeo eacute um trabalho aacuterduo que exige
dedicaccedilatildeo e uma grande sentimento daquilo que agrada o seu
puacuteblico-alvo Em geral envolve o trabalho de uma equipe que precisa
7
trabalhar unida para fazer cada paacutegina ser bonita e o site como um
todo funcionar como uma boa experiecircncia para o usuaacuterio
O Restaurante
Eacute interessante a comparaccedilatildeo de um site web com um restaurante
Vocecirc descobre um restaurante atraveacutes de um amigo de um anuacutencio ou passando
por acaso por ele Vocecirc lecirc cartazes ou faixas com ofertas do lado de fora paacutera na
entrada e sente o clima e o cheirinho da comida
Estando na porta vocecirc decide se vai ou natildeo entrar Em um restaurante
popular vocecirc ateacute pode esperar em uma fila para conseguir uma mesa Se
vocecirc ficar seraacute levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc
faz a sua escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obras do chef Vocecirc prova um ou outro item
mistura alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc deixa
uma gorjeta e pode ateacute conversar um pouco com o maitre ou o dono
Depois quando sentir fome novamente poderaacute voltar ou natildeo Estando na
porta vocecirc decide se vai ou natildeo entrar Em um restaurante popular vocecirc
ateacute pode esperar em uma fila para conseguir uma mesa Se vocecirc ficar seraacute
levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc faz a sua
escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obra do chef Vocecirc prova um ou outro item mistura
alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc
deixa uma gorjeta e pode ateacute conversar um pouco com o maitre ou o
dono Depois quando sentir fome novamente poderaacute voltar ou natildeo
8
de acordo com a qualidade da sua primeira experiecircncia de acordo
com a qualidade da sua primeira experiecircncia
Pense na Web como uma cidadezinha aconchegante com alguns milhotildees de
restaurantes
9
IInniicciiaannddoo oo MMSS -- FFrroonnttPPaaggee 22000000
Para iniciar o MS - FrontPage 2000 clique em Iniciar Programas Microsoft Front Page
10
DDeeffiinniiccedilccedilatildeatildeoo ddee aallgguunnss tteerrmmooss uussaaddooss eemm hhoommee ppaaggeess Web page
Paacuteginas satildeo os documentos baacutesicos da internet e satildeo escritas em
HTML (hypertext markup language)
Frame
(Quadro ou moldura) Satildeo modelos de paacuteginas HTML que dividem a
janela do browser em aacutereas definidas chamadas frames (molduras) Cada um dos
frames pode exibir uma paacutegina diferente Clicando em um hyperlink em uma
paacutegina a nova paacutegina usualmente eacute exibida em outro frame (moldura)
Hyperlink
Eacute uma conexatildeo de uma paacutegina com outro local seja uma nova
paacutegina ou uma localizaccedilatildeo diferente na mesma paacutegina O hyperlink pode ser uma
palavra frase uma imagem um arquivo um programa ou um endereccedilo de e-mail
Navigation bar
(barra de navegaccedilatildeo) Eacute um conjunto de hyperlinks usados
para navegaccedilatildeo em um endereccedilo As barras de navegaccedilatildeo podem ter hyperlinks
para outros endereccedilos (sites) ou para uma paacutegina principal dentro de um mesmo
site A barra de navegaccedilatildeo pode ser formada por um conjunto de imagens
identificadas com textos ou apenas por textos
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
3
1 Atraveacutes de um cliente Web (tambeacutem chamado de browser) o usuaacuterio
seleciona uma parte do hipertexto ligada a outro documento - The History of
Computers
2 O cliente Web conecta-se a um computador especificado por um endereccedilo em
algum lugar da Internet e pede ao servidor Web desse computador pelo
documento The History of Computers
3 O servidor responde enviando o texto e qualquer outro elemento de miacutedia
existente no documento (figuras sons ou filmes) para a tela do usuaacuterio
DICAS PARA CRIAR UM BOM SITE
Criar um site eacute muito simples graccedilas agraves facilidades que o FrontPage oferece
Poreacutem um site bem elaborado exige paciecircncia dedicaccedilatildeo e conhecimentos de
algumas teacutecnicas Procure lembrar sempre que um bom site aleacutem de ter uma
aparecircncia atraente necessita que a mensagem seja transmitida de forma sucinta
e sem demora no aparecimento das informaccedilotildees na tela Fique atento agraves
seguintes dicas
Defina os seus objetivos de forma clara
Analise o perfil de quem iraacute visitar seu site
Utilize itens que possam ser exibidos rapidamente na tela
Crie um bom layout de forma a tornaacute-lo bastante atraente
Evite excesso de informaccedilotildees numa uacutenica paacutegina
A cada dia verificamos que a informaccedilatildeo eacute uma ferramenta de extrema
necessidade em qualquer negoacutecio Sabendo disto diversas empresas investem
em tecnologias que possibilitam a transmissatildeo de tais informaccedilotildees Um dos meios
de transmissatildeo mais divulgado na miacutedia de forma geral eacute a Internet e esta
produziu tendecircncias como Intranet Atraveacutes destas redes de computadores
funcionaacuterios empresas instituiccedilotildees profissionais liberais e qualquer tipo de
pessoa podem divulgar seus trabalhos e venderem suas ideacuteias praticamente
4
para qualquer parte do planeta Geralmente estas informaccedilotildees satildeo apresentadas
em formas de paacuteginas gravadas em um determinado site (local virtual)
O Microsoft FrontPage 2000 eacute considerado um dos melhores programas na
criaccedilatildeo de Web sites e se vocecirc pensa que precisaraacute dominar alguma linguagem
de programaccedilatildeo para obter sites com aparecircncia profissional ficaraacute surpreso em
saber que o FrontPage eacute capaz de executar automaticamente praticamente todas
as tarefas de programaccedilatildeo
Para prosseguir no curso vocecirc deveraacute adquirir o programa FrontPage 2000 ou
XP outras versotildees tambeacutem servem (FrontPage 97 98 ou express) poreacutem elas
podem natildeo ter todas as funcionalidades aqui demonstradas
O Front Page 2000 eacute parte integrante do Microsoft Office 2000 O Microsoft Office
XP tambeacutem conteacutem uma versatildeo (Front Page 2002) que pode ser utilizada
Verifique se vocecirc jaacute natildeo tem o Office 2000 ou XP na sua maacutequina pois neste caso
a probabilidade eacute grande de que o Front Page jaacute esteja instalado
5
AA EEvvoolluuccedilccedilatildeatildeoo ddaa WWeebb
A Web evoluiu muito nos uacuteltimos anos podemos classificar os sites como
de 1ordf 2ordf ou 3ordf geraccedilatildeo Os requisitos para ser classificado como um site
de terceira geraccedilatildeo estatildeo mais relacionados ao design do que propriamente
agrave tecnologia
A primeira geraccedilatildeo
Os primeiros sites na Web privilegiavam apenas o conteuacutedo e natildeo a
forma Foram criados por cientistas que desejavam compartilhar
suas ideacuteias com outros cientistas Eles eram estritamente lineares e
tinham um miacutenimo de funcionalidade
Na primeira geraccedilatildeo nota-se claramente a limitaccedilatildeo imposta por
modems lentos e monitores monocromaacuteticos Os graacuteficos e textos
eram apresentados sempre de cima para baixo e da esquerda para a
direita Era muito comum o uso de saltos de linhas marcadores e
linhas horizontais como recursos para separar paraacutegrafos
A segunda geraccedilatildeo
No iniacutecio de 1995 foram lanccediladas diversas extensotildees agrave linguagem
HTML no browser Netscape Navigator (que entatildeo dominava sozinho
a web) A evoluccedilatildeo nos sites surgiu na forma de iacutecones imagens de
fundo bototildees com bordas tabelas e graacuteficos mapeados A estrutura
deixa de ser linear para ser apresentada de forma hieraacuterquica quase
sempre atraveacutes de menus com vaacuterios niacuteveis
A maior diferenccedila da segunda geraccedilatildeo para a primeira foi a
substituiccedilatildeo de palavras por elementos graacuteficos As funccedilotildees passam
a ser representadas por iacutecones surgem imagens de fundo ao inveacutes
dos antigos fundos cinzas os graacuteficos coloridos e animados
6
substituem as antigas figuras Cria-se o conceito de home-page
uma paacutegina cheia de desenhos 3D janelas e bototildees que serve de
menu para acessar o restante de um site
Nesta eacutepoca a legibilidade deixou de ser importante Para ter um
bom site era necessaacuterio mostrar uma grande quantidade de truques
teacutecnicos
Sites de terceira geraccedilatildeo
O que diferencia a terceira geraccedilatildeo das demais natildeo satildeo os recursos
tecnoloacutegicos A grande diferenccedila estaacute no design A ideacuteia eacute dar aos
usuaacuterios uma boa sensaccedilatildeo As pessoas mais habilidosas
conseguiram criar sites de terceira geraccedilatildeo usando qualquer browser
graacutefico
Na terceira geraccedilatildeo o conteuacutedo volta ao seu lugar de destaque
Entretanto a forma natildeo eacute mais deixada de lado Haacute uma
preocupaccedilatildeo simultacircnea com funcionalidade e beleza esteacutetica Haacute
grande preocupaccedilatildeo no layout preciso na harmonia entre as cores
na escolha do tipo de letra adequado no uso correto dos graacuteficos e
no tempo para carregar cada paacutegina Acima de tudo haacute um
compromisso de ser agradaacutevel (em todos os sentidos) ao usuaacuterio
Os projetistas destes novos sites utilizam metaacuteforas e modelos
psicoloacutegicos dos consumidores Assim como os arquitetos que fazem
os shopping centers eles passam horas e ateacute dias pensando em
como tornar suas paacuteginas mais atraentes aos seus usuaacuterios
Criar sites de terceira geraccedilatildeo eacute um trabalho aacuterduo que exige
dedicaccedilatildeo e uma grande sentimento daquilo que agrada o seu
puacuteblico-alvo Em geral envolve o trabalho de uma equipe que precisa
7
trabalhar unida para fazer cada paacutegina ser bonita e o site como um
todo funcionar como uma boa experiecircncia para o usuaacuterio
O Restaurante
Eacute interessante a comparaccedilatildeo de um site web com um restaurante
Vocecirc descobre um restaurante atraveacutes de um amigo de um anuacutencio ou passando
por acaso por ele Vocecirc lecirc cartazes ou faixas com ofertas do lado de fora paacutera na
entrada e sente o clima e o cheirinho da comida
Estando na porta vocecirc decide se vai ou natildeo entrar Em um restaurante
popular vocecirc ateacute pode esperar em uma fila para conseguir uma mesa Se
vocecirc ficar seraacute levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc
faz a sua escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obras do chef Vocecirc prova um ou outro item
mistura alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc deixa
uma gorjeta e pode ateacute conversar um pouco com o maitre ou o dono
Depois quando sentir fome novamente poderaacute voltar ou natildeo Estando na
porta vocecirc decide se vai ou natildeo entrar Em um restaurante popular vocecirc
ateacute pode esperar em uma fila para conseguir uma mesa Se vocecirc ficar seraacute
levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc faz a sua
escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obra do chef Vocecirc prova um ou outro item mistura
alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc
deixa uma gorjeta e pode ateacute conversar um pouco com o maitre ou o
dono Depois quando sentir fome novamente poderaacute voltar ou natildeo
8
de acordo com a qualidade da sua primeira experiecircncia de acordo
com a qualidade da sua primeira experiecircncia
Pense na Web como uma cidadezinha aconchegante com alguns milhotildees de
restaurantes
9
IInniicciiaannddoo oo MMSS -- FFrroonnttPPaaggee 22000000
Para iniciar o MS - FrontPage 2000 clique em Iniciar Programas Microsoft Front Page
10
DDeeffiinniiccedilccedilatildeatildeoo ddee aallgguunnss tteerrmmooss uussaaddooss eemm hhoommee ppaaggeess Web page
Paacuteginas satildeo os documentos baacutesicos da internet e satildeo escritas em
HTML (hypertext markup language)
Frame
(Quadro ou moldura) Satildeo modelos de paacuteginas HTML que dividem a
janela do browser em aacutereas definidas chamadas frames (molduras) Cada um dos
frames pode exibir uma paacutegina diferente Clicando em um hyperlink em uma
paacutegina a nova paacutegina usualmente eacute exibida em outro frame (moldura)
Hyperlink
Eacute uma conexatildeo de uma paacutegina com outro local seja uma nova
paacutegina ou uma localizaccedilatildeo diferente na mesma paacutegina O hyperlink pode ser uma
palavra frase uma imagem um arquivo um programa ou um endereccedilo de e-mail
Navigation bar
(barra de navegaccedilatildeo) Eacute um conjunto de hyperlinks usados
para navegaccedilatildeo em um endereccedilo As barras de navegaccedilatildeo podem ter hyperlinks
para outros endereccedilos (sites) ou para uma paacutegina principal dentro de um mesmo
site A barra de navegaccedilatildeo pode ser formada por um conjunto de imagens
identificadas com textos ou apenas por textos
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
4
para qualquer parte do planeta Geralmente estas informaccedilotildees satildeo apresentadas
em formas de paacuteginas gravadas em um determinado site (local virtual)
O Microsoft FrontPage 2000 eacute considerado um dos melhores programas na
criaccedilatildeo de Web sites e se vocecirc pensa que precisaraacute dominar alguma linguagem
de programaccedilatildeo para obter sites com aparecircncia profissional ficaraacute surpreso em
saber que o FrontPage eacute capaz de executar automaticamente praticamente todas
as tarefas de programaccedilatildeo
Para prosseguir no curso vocecirc deveraacute adquirir o programa FrontPage 2000 ou
XP outras versotildees tambeacutem servem (FrontPage 97 98 ou express) poreacutem elas
podem natildeo ter todas as funcionalidades aqui demonstradas
O Front Page 2000 eacute parte integrante do Microsoft Office 2000 O Microsoft Office
XP tambeacutem conteacutem uma versatildeo (Front Page 2002) que pode ser utilizada
Verifique se vocecirc jaacute natildeo tem o Office 2000 ou XP na sua maacutequina pois neste caso
a probabilidade eacute grande de que o Front Page jaacute esteja instalado
5
AA EEvvoolluuccedilccedilatildeatildeoo ddaa WWeebb
A Web evoluiu muito nos uacuteltimos anos podemos classificar os sites como
de 1ordf 2ordf ou 3ordf geraccedilatildeo Os requisitos para ser classificado como um site
de terceira geraccedilatildeo estatildeo mais relacionados ao design do que propriamente
agrave tecnologia
A primeira geraccedilatildeo
Os primeiros sites na Web privilegiavam apenas o conteuacutedo e natildeo a
forma Foram criados por cientistas que desejavam compartilhar
suas ideacuteias com outros cientistas Eles eram estritamente lineares e
tinham um miacutenimo de funcionalidade
Na primeira geraccedilatildeo nota-se claramente a limitaccedilatildeo imposta por
modems lentos e monitores monocromaacuteticos Os graacuteficos e textos
eram apresentados sempre de cima para baixo e da esquerda para a
direita Era muito comum o uso de saltos de linhas marcadores e
linhas horizontais como recursos para separar paraacutegrafos
A segunda geraccedilatildeo
No iniacutecio de 1995 foram lanccediladas diversas extensotildees agrave linguagem
HTML no browser Netscape Navigator (que entatildeo dominava sozinho
a web) A evoluccedilatildeo nos sites surgiu na forma de iacutecones imagens de
fundo bototildees com bordas tabelas e graacuteficos mapeados A estrutura
deixa de ser linear para ser apresentada de forma hieraacuterquica quase
sempre atraveacutes de menus com vaacuterios niacuteveis
A maior diferenccedila da segunda geraccedilatildeo para a primeira foi a
substituiccedilatildeo de palavras por elementos graacuteficos As funccedilotildees passam
a ser representadas por iacutecones surgem imagens de fundo ao inveacutes
dos antigos fundos cinzas os graacuteficos coloridos e animados
6
substituem as antigas figuras Cria-se o conceito de home-page
uma paacutegina cheia de desenhos 3D janelas e bototildees que serve de
menu para acessar o restante de um site
Nesta eacutepoca a legibilidade deixou de ser importante Para ter um
bom site era necessaacuterio mostrar uma grande quantidade de truques
teacutecnicos
Sites de terceira geraccedilatildeo
O que diferencia a terceira geraccedilatildeo das demais natildeo satildeo os recursos
tecnoloacutegicos A grande diferenccedila estaacute no design A ideacuteia eacute dar aos
usuaacuterios uma boa sensaccedilatildeo As pessoas mais habilidosas
conseguiram criar sites de terceira geraccedilatildeo usando qualquer browser
graacutefico
Na terceira geraccedilatildeo o conteuacutedo volta ao seu lugar de destaque
Entretanto a forma natildeo eacute mais deixada de lado Haacute uma
preocupaccedilatildeo simultacircnea com funcionalidade e beleza esteacutetica Haacute
grande preocupaccedilatildeo no layout preciso na harmonia entre as cores
na escolha do tipo de letra adequado no uso correto dos graacuteficos e
no tempo para carregar cada paacutegina Acima de tudo haacute um
compromisso de ser agradaacutevel (em todos os sentidos) ao usuaacuterio
Os projetistas destes novos sites utilizam metaacuteforas e modelos
psicoloacutegicos dos consumidores Assim como os arquitetos que fazem
os shopping centers eles passam horas e ateacute dias pensando em
como tornar suas paacuteginas mais atraentes aos seus usuaacuterios
Criar sites de terceira geraccedilatildeo eacute um trabalho aacuterduo que exige
dedicaccedilatildeo e uma grande sentimento daquilo que agrada o seu
puacuteblico-alvo Em geral envolve o trabalho de uma equipe que precisa
7
trabalhar unida para fazer cada paacutegina ser bonita e o site como um
todo funcionar como uma boa experiecircncia para o usuaacuterio
O Restaurante
Eacute interessante a comparaccedilatildeo de um site web com um restaurante
Vocecirc descobre um restaurante atraveacutes de um amigo de um anuacutencio ou passando
por acaso por ele Vocecirc lecirc cartazes ou faixas com ofertas do lado de fora paacutera na
entrada e sente o clima e o cheirinho da comida
Estando na porta vocecirc decide se vai ou natildeo entrar Em um restaurante
popular vocecirc ateacute pode esperar em uma fila para conseguir uma mesa Se
vocecirc ficar seraacute levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc
faz a sua escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obras do chef Vocecirc prova um ou outro item
mistura alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc deixa
uma gorjeta e pode ateacute conversar um pouco com o maitre ou o dono
Depois quando sentir fome novamente poderaacute voltar ou natildeo Estando na
porta vocecirc decide se vai ou natildeo entrar Em um restaurante popular vocecirc
ateacute pode esperar em uma fila para conseguir uma mesa Se vocecirc ficar seraacute
levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc faz a sua
escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obra do chef Vocecirc prova um ou outro item mistura
alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc
deixa uma gorjeta e pode ateacute conversar um pouco com o maitre ou o
dono Depois quando sentir fome novamente poderaacute voltar ou natildeo
8
de acordo com a qualidade da sua primeira experiecircncia de acordo
com a qualidade da sua primeira experiecircncia
Pense na Web como uma cidadezinha aconchegante com alguns milhotildees de
restaurantes
9
IInniicciiaannddoo oo MMSS -- FFrroonnttPPaaggee 22000000
Para iniciar o MS - FrontPage 2000 clique em Iniciar Programas Microsoft Front Page
10
DDeeffiinniiccedilccedilatildeatildeoo ddee aallgguunnss tteerrmmooss uussaaddooss eemm hhoommee ppaaggeess Web page
Paacuteginas satildeo os documentos baacutesicos da internet e satildeo escritas em
HTML (hypertext markup language)
Frame
(Quadro ou moldura) Satildeo modelos de paacuteginas HTML que dividem a
janela do browser em aacutereas definidas chamadas frames (molduras) Cada um dos
frames pode exibir uma paacutegina diferente Clicando em um hyperlink em uma
paacutegina a nova paacutegina usualmente eacute exibida em outro frame (moldura)
Hyperlink
Eacute uma conexatildeo de uma paacutegina com outro local seja uma nova
paacutegina ou uma localizaccedilatildeo diferente na mesma paacutegina O hyperlink pode ser uma
palavra frase uma imagem um arquivo um programa ou um endereccedilo de e-mail
Navigation bar
(barra de navegaccedilatildeo) Eacute um conjunto de hyperlinks usados
para navegaccedilatildeo em um endereccedilo As barras de navegaccedilatildeo podem ter hyperlinks
para outros endereccedilos (sites) ou para uma paacutegina principal dentro de um mesmo
site A barra de navegaccedilatildeo pode ser formada por um conjunto de imagens
identificadas com textos ou apenas por textos
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
5
AA EEvvoolluuccedilccedilatildeatildeoo ddaa WWeebb
A Web evoluiu muito nos uacuteltimos anos podemos classificar os sites como
de 1ordf 2ordf ou 3ordf geraccedilatildeo Os requisitos para ser classificado como um site
de terceira geraccedilatildeo estatildeo mais relacionados ao design do que propriamente
agrave tecnologia
A primeira geraccedilatildeo
Os primeiros sites na Web privilegiavam apenas o conteuacutedo e natildeo a
forma Foram criados por cientistas que desejavam compartilhar
suas ideacuteias com outros cientistas Eles eram estritamente lineares e
tinham um miacutenimo de funcionalidade
Na primeira geraccedilatildeo nota-se claramente a limitaccedilatildeo imposta por
modems lentos e monitores monocromaacuteticos Os graacuteficos e textos
eram apresentados sempre de cima para baixo e da esquerda para a
direita Era muito comum o uso de saltos de linhas marcadores e
linhas horizontais como recursos para separar paraacutegrafos
A segunda geraccedilatildeo
No iniacutecio de 1995 foram lanccediladas diversas extensotildees agrave linguagem
HTML no browser Netscape Navigator (que entatildeo dominava sozinho
a web) A evoluccedilatildeo nos sites surgiu na forma de iacutecones imagens de
fundo bototildees com bordas tabelas e graacuteficos mapeados A estrutura
deixa de ser linear para ser apresentada de forma hieraacuterquica quase
sempre atraveacutes de menus com vaacuterios niacuteveis
A maior diferenccedila da segunda geraccedilatildeo para a primeira foi a
substituiccedilatildeo de palavras por elementos graacuteficos As funccedilotildees passam
a ser representadas por iacutecones surgem imagens de fundo ao inveacutes
dos antigos fundos cinzas os graacuteficos coloridos e animados
6
substituem as antigas figuras Cria-se o conceito de home-page
uma paacutegina cheia de desenhos 3D janelas e bototildees que serve de
menu para acessar o restante de um site
Nesta eacutepoca a legibilidade deixou de ser importante Para ter um
bom site era necessaacuterio mostrar uma grande quantidade de truques
teacutecnicos
Sites de terceira geraccedilatildeo
O que diferencia a terceira geraccedilatildeo das demais natildeo satildeo os recursos
tecnoloacutegicos A grande diferenccedila estaacute no design A ideacuteia eacute dar aos
usuaacuterios uma boa sensaccedilatildeo As pessoas mais habilidosas
conseguiram criar sites de terceira geraccedilatildeo usando qualquer browser
graacutefico
Na terceira geraccedilatildeo o conteuacutedo volta ao seu lugar de destaque
Entretanto a forma natildeo eacute mais deixada de lado Haacute uma
preocupaccedilatildeo simultacircnea com funcionalidade e beleza esteacutetica Haacute
grande preocupaccedilatildeo no layout preciso na harmonia entre as cores
na escolha do tipo de letra adequado no uso correto dos graacuteficos e
no tempo para carregar cada paacutegina Acima de tudo haacute um
compromisso de ser agradaacutevel (em todos os sentidos) ao usuaacuterio
Os projetistas destes novos sites utilizam metaacuteforas e modelos
psicoloacutegicos dos consumidores Assim como os arquitetos que fazem
os shopping centers eles passam horas e ateacute dias pensando em
como tornar suas paacuteginas mais atraentes aos seus usuaacuterios
Criar sites de terceira geraccedilatildeo eacute um trabalho aacuterduo que exige
dedicaccedilatildeo e uma grande sentimento daquilo que agrada o seu
puacuteblico-alvo Em geral envolve o trabalho de uma equipe que precisa
7
trabalhar unida para fazer cada paacutegina ser bonita e o site como um
todo funcionar como uma boa experiecircncia para o usuaacuterio
O Restaurante
Eacute interessante a comparaccedilatildeo de um site web com um restaurante
Vocecirc descobre um restaurante atraveacutes de um amigo de um anuacutencio ou passando
por acaso por ele Vocecirc lecirc cartazes ou faixas com ofertas do lado de fora paacutera na
entrada e sente o clima e o cheirinho da comida
Estando na porta vocecirc decide se vai ou natildeo entrar Em um restaurante
popular vocecirc ateacute pode esperar em uma fila para conseguir uma mesa Se
vocecirc ficar seraacute levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc
faz a sua escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obras do chef Vocecirc prova um ou outro item
mistura alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc deixa
uma gorjeta e pode ateacute conversar um pouco com o maitre ou o dono
Depois quando sentir fome novamente poderaacute voltar ou natildeo Estando na
porta vocecirc decide se vai ou natildeo entrar Em um restaurante popular vocecirc
ateacute pode esperar em uma fila para conseguir uma mesa Se vocecirc ficar seraacute
levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc faz a sua
escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obra do chef Vocecirc prova um ou outro item mistura
alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc
deixa uma gorjeta e pode ateacute conversar um pouco com o maitre ou o
dono Depois quando sentir fome novamente poderaacute voltar ou natildeo
8
de acordo com a qualidade da sua primeira experiecircncia de acordo
com a qualidade da sua primeira experiecircncia
Pense na Web como uma cidadezinha aconchegante com alguns milhotildees de
restaurantes
9
IInniicciiaannddoo oo MMSS -- FFrroonnttPPaaggee 22000000
Para iniciar o MS - FrontPage 2000 clique em Iniciar Programas Microsoft Front Page
10
DDeeffiinniiccedilccedilatildeatildeoo ddee aallgguunnss tteerrmmooss uussaaddooss eemm hhoommee ppaaggeess Web page
Paacuteginas satildeo os documentos baacutesicos da internet e satildeo escritas em
HTML (hypertext markup language)
Frame
(Quadro ou moldura) Satildeo modelos de paacuteginas HTML que dividem a
janela do browser em aacutereas definidas chamadas frames (molduras) Cada um dos
frames pode exibir uma paacutegina diferente Clicando em um hyperlink em uma
paacutegina a nova paacutegina usualmente eacute exibida em outro frame (moldura)
Hyperlink
Eacute uma conexatildeo de uma paacutegina com outro local seja uma nova
paacutegina ou uma localizaccedilatildeo diferente na mesma paacutegina O hyperlink pode ser uma
palavra frase uma imagem um arquivo um programa ou um endereccedilo de e-mail
Navigation bar
(barra de navegaccedilatildeo) Eacute um conjunto de hyperlinks usados
para navegaccedilatildeo em um endereccedilo As barras de navegaccedilatildeo podem ter hyperlinks
para outros endereccedilos (sites) ou para uma paacutegina principal dentro de um mesmo
site A barra de navegaccedilatildeo pode ser formada por um conjunto de imagens
identificadas com textos ou apenas por textos
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
6
substituem as antigas figuras Cria-se o conceito de home-page
uma paacutegina cheia de desenhos 3D janelas e bototildees que serve de
menu para acessar o restante de um site
Nesta eacutepoca a legibilidade deixou de ser importante Para ter um
bom site era necessaacuterio mostrar uma grande quantidade de truques
teacutecnicos
Sites de terceira geraccedilatildeo
O que diferencia a terceira geraccedilatildeo das demais natildeo satildeo os recursos
tecnoloacutegicos A grande diferenccedila estaacute no design A ideacuteia eacute dar aos
usuaacuterios uma boa sensaccedilatildeo As pessoas mais habilidosas
conseguiram criar sites de terceira geraccedilatildeo usando qualquer browser
graacutefico
Na terceira geraccedilatildeo o conteuacutedo volta ao seu lugar de destaque
Entretanto a forma natildeo eacute mais deixada de lado Haacute uma
preocupaccedilatildeo simultacircnea com funcionalidade e beleza esteacutetica Haacute
grande preocupaccedilatildeo no layout preciso na harmonia entre as cores
na escolha do tipo de letra adequado no uso correto dos graacuteficos e
no tempo para carregar cada paacutegina Acima de tudo haacute um
compromisso de ser agradaacutevel (em todos os sentidos) ao usuaacuterio
Os projetistas destes novos sites utilizam metaacuteforas e modelos
psicoloacutegicos dos consumidores Assim como os arquitetos que fazem
os shopping centers eles passam horas e ateacute dias pensando em
como tornar suas paacuteginas mais atraentes aos seus usuaacuterios
Criar sites de terceira geraccedilatildeo eacute um trabalho aacuterduo que exige
dedicaccedilatildeo e uma grande sentimento daquilo que agrada o seu
puacuteblico-alvo Em geral envolve o trabalho de uma equipe que precisa
7
trabalhar unida para fazer cada paacutegina ser bonita e o site como um
todo funcionar como uma boa experiecircncia para o usuaacuterio
O Restaurante
Eacute interessante a comparaccedilatildeo de um site web com um restaurante
Vocecirc descobre um restaurante atraveacutes de um amigo de um anuacutencio ou passando
por acaso por ele Vocecirc lecirc cartazes ou faixas com ofertas do lado de fora paacutera na
entrada e sente o clima e o cheirinho da comida
Estando na porta vocecirc decide se vai ou natildeo entrar Em um restaurante
popular vocecirc ateacute pode esperar em uma fila para conseguir uma mesa Se
vocecirc ficar seraacute levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc
faz a sua escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obras do chef Vocecirc prova um ou outro item
mistura alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc deixa
uma gorjeta e pode ateacute conversar um pouco com o maitre ou o dono
Depois quando sentir fome novamente poderaacute voltar ou natildeo Estando na
porta vocecirc decide se vai ou natildeo entrar Em um restaurante popular vocecirc
ateacute pode esperar em uma fila para conseguir uma mesa Se vocecirc ficar seraacute
levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc faz a sua
escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obra do chef Vocecirc prova um ou outro item mistura
alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc
deixa uma gorjeta e pode ateacute conversar um pouco com o maitre ou o
dono Depois quando sentir fome novamente poderaacute voltar ou natildeo
8
de acordo com a qualidade da sua primeira experiecircncia de acordo
com a qualidade da sua primeira experiecircncia
Pense na Web como uma cidadezinha aconchegante com alguns milhotildees de
restaurantes
9
IInniicciiaannddoo oo MMSS -- FFrroonnttPPaaggee 22000000
Para iniciar o MS - FrontPage 2000 clique em Iniciar Programas Microsoft Front Page
10
DDeeffiinniiccedilccedilatildeatildeoo ddee aallgguunnss tteerrmmooss uussaaddooss eemm hhoommee ppaaggeess Web page
Paacuteginas satildeo os documentos baacutesicos da internet e satildeo escritas em
HTML (hypertext markup language)
Frame
(Quadro ou moldura) Satildeo modelos de paacuteginas HTML que dividem a
janela do browser em aacutereas definidas chamadas frames (molduras) Cada um dos
frames pode exibir uma paacutegina diferente Clicando em um hyperlink em uma
paacutegina a nova paacutegina usualmente eacute exibida em outro frame (moldura)
Hyperlink
Eacute uma conexatildeo de uma paacutegina com outro local seja uma nova
paacutegina ou uma localizaccedilatildeo diferente na mesma paacutegina O hyperlink pode ser uma
palavra frase uma imagem um arquivo um programa ou um endereccedilo de e-mail
Navigation bar
(barra de navegaccedilatildeo) Eacute um conjunto de hyperlinks usados
para navegaccedilatildeo em um endereccedilo As barras de navegaccedilatildeo podem ter hyperlinks
para outros endereccedilos (sites) ou para uma paacutegina principal dentro de um mesmo
site A barra de navegaccedilatildeo pode ser formada por um conjunto de imagens
identificadas com textos ou apenas por textos
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
7
trabalhar unida para fazer cada paacutegina ser bonita e o site como um
todo funcionar como uma boa experiecircncia para o usuaacuterio
O Restaurante
Eacute interessante a comparaccedilatildeo de um site web com um restaurante
Vocecirc descobre um restaurante atraveacutes de um amigo de um anuacutencio ou passando
por acaso por ele Vocecirc lecirc cartazes ou faixas com ofertas do lado de fora paacutera na
entrada e sente o clima e o cheirinho da comida
Estando na porta vocecirc decide se vai ou natildeo entrar Em um restaurante
popular vocecirc ateacute pode esperar em uma fila para conseguir uma mesa Se
vocecirc ficar seraacute levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc
faz a sua escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obras do chef Vocecirc prova um ou outro item
mistura alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc deixa
uma gorjeta e pode ateacute conversar um pouco com o maitre ou o dono
Depois quando sentir fome novamente poderaacute voltar ou natildeo Estando na
porta vocecirc decide se vai ou natildeo entrar Em um restaurante popular vocecirc
ateacute pode esperar em uma fila para conseguir uma mesa Se vocecirc ficar seraacute
levado a uma mesa e laacute lhe mostraratildeo um cardaacutepio Vocecirc faz a sua
escolha
Quando a comida chega vocecirc aprecia o prato Tanto a comida como a sua
arrumaccedilatildeo no prato satildeo obra do chef Vocecirc prova um ou outro item mistura
alguns para experimentar o sabor
No final vocecirc escolhe uma sobremesa pede a conta e paga Vocecirc
deixa uma gorjeta e pode ateacute conversar um pouco com o maitre ou o
dono Depois quando sentir fome novamente poderaacute voltar ou natildeo
8
de acordo com a qualidade da sua primeira experiecircncia de acordo
com a qualidade da sua primeira experiecircncia
Pense na Web como uma cidadezinha aconchegante com alguns milhotildees de
restaurantes
9
IInniicciiaannddoo oo MMSS -- FFrroonnttPPaaggee 22000000
Para iniciar o MS - FrontPage 2000 clique em Iniciar Programas Microsoft Front Page
10
DDeeffiinniiccedilccedilatildeatildeoo ddee aallgguunnss tteerrmmooss uussaaddooss eemm hhoommee ppaaggeess Web page
Paacuteginas satildeo os documentos baacutesicos da internet e satildeo escritas em
HTML (hypertext markup language)
Frame
(Quadro ou moldura) Satildeo modelos de paacuteginas HTML que dividem a
janela do browser em aacutereas definidas chamadas frames (molduras) Cada um dos
frames pode exibir uma paacutegina diferente Clicando em um hyperlink em uma
paacutegina a nova paacutegina usualmente eacute exibida em outro frame (moldura)
Hyperlink
Eacute uma conexatildeo de uma paacutegina com outro local seja uma nova
paacutegina ou uma localizaccedilatildeo diferente na mesma paacutegina O hyperlink pode ser uma
palavra frase uma imagem um arquivo um programa ou um endereccedilo de e-mail
Navigation bar
(barra de navegaccedilatildeo) Eacute um conjunto de hyperlinks usados
para navegaccedilatildeo em um endereccedilo As barras de navegaccedilatildeo podem ter hyperlinks
para outros endereccedilos (sites) ou para uma paacutegina principal dentro de um mesmo
site A barra de navegaccedilatildeo pode ser formada por um conjunto de imagens
identificadas com textos ou apenas por textos
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
8
de acordo com a qualidade da sua primeira experiecircncia de acordo
com a qualidade da sua primeira experiecircncia
Pense na Web como uma cidadezinha aconchegante com alguns milhotildees de
restaurantes
9
IInniicciiaannddoo oo MMSS -- FFrroonnttPPaaggee 22000000
Para iniciar o MS - FrontPage 2000 clique em Iniciar Programas Microsoft Front Page
10
DDeeffiinniiccedilccedilatildeatildeoo ddee aallgguunnss tteerrmmooss uussaaddooss eemm hhoommee ppaaggeess Web page
Paacuteginas satildeo os documentos baacutesicos da internet e satildeo escritas em
HTML (hypertext markup language)
Frame
(Quadro ou moldura) Satildeo modelos de paacuteginas HTML que dividem a
janela do browser em aacutereas definidas chamadas frames (molduras) Cada um dos
frames pode exibir uma paacutegina diferente Clicando em um hyperlink em uma
paacutegina a nova paacutegina usualmente eacute exibida em outro frame (moldura)
Hyperlink
Eacute uma conexatildeo de uma paacutegina com outro local seja uma nova
paacutegina ou uma localizaccedilatildeo diferente na mesma paacutegina O hyperlink pode ser uma
palavra frase uma imagem um arquivo um programa ou um endereccedilo de e-mail
Navigation bar
(barra de navegaccedilatildeo) Eacute um conjunto de hyperlinks usados
para navegaccedilatildeo em um endereccedilo As barras de navegaccedilatildeo podem ter hyperlinks
para outros endereccedilos (sites) ou para uma paacutegina principal dentro de um mesmo
site A barra de navegaccedilatildeo pode ser formada por um conjunto de imagens
identificadas com textos ou apenas por textos
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
9
IInniicciiaannddoo oo MMSS -- FFrroonnttPPaaggee 22000000
Para iniciar o MS - FrontPage 2000 clique em Iniciar Programas Microsoft Front Page
10
DDeeffiinniiccedilccedilatildeatildeoo ddee aallgguunnss tteerrmmooss uussaaddooss eemm hhoommee ppaaggeess Web page
Paacuteginas satildeo os documentos baacutesicos da internet e satildeo escritas em
HTML (hypertext markup language)
Frame
(Quadro ou moldura) Satildeo modelos de paacuteginas HTML que dividem a
janela do browser em aacutereas definidas chamadas frames (molduras) Cada um dos
frames pode exibir uma paacutegina diferente Clicando em um hyperlink em uma
paacutegina a nova paacutegina usualmente eacute exibida em outro frame (moldura)
Hyperlink
Eacute uma conexatildeo de uma paacutegina com outro local seja uma nova
paacutegina ou uma localizaccedilatildeo diferente na mesma paacutegina O hyperlink pode ser uma
palavra frase uma imagem um arquivo um programa ou um endereccedilo de e-mail
Navigation bar
(barra de navegaccedilatildeo) Eacute um conjunto de hyperlinks usados
para navegaccedilatildeo em um endereccedilo As barras de navegaccedilatildeo podem ter hyperlinks
para outros endereccedilos (sites) ou para uma paacutegina principal dentro de um mesmo
site A barra de navegaccedilatildeo pode ser formada por um conjunto de imagens
identificadas com textos ou apenas por textos
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
10
DDeeffiinniiccedilccedilatildeatildeoo ddee aallgguunnss tteerrmmooss uussaaddooss eemm hhoommee ppaaggeess Web page
Paacuteginas satildeo os documentos baacutesicos da internet e satildeo escritas em
HTML (hypertext markup language)
Frame
(Quadro ou moldura) Satildeo modelos de paacuteginas HTML que dividem a
janela do browser em aacutereas definidas chamadas frames (molduras) Cada um dos
frames pode exibir uma paacutegina diferente Clicando em um hyperlink em uma
paacutegina a nova paacutegina usualmente eacute exibida em outro frame (moldura)
Hyperlink
Eacute uma conexatildeo de uma paacutegina com outro local seja uma nova
paacutegina ou uma localizaccedilatildeo diferente na mesma paacutegina O hyperlink pode ser uma
palavra frase uma imagem um arquivo um programa ou um endereccedilo de e-mail
Navigation bar
(barra de navegaccedilatildeo) Eacute um conjunto de hyperlinks usados
para navegaccedilatildeo em um endereccedilo As barras de navegaccedilatildeo podem ter hyperlinks
para outros endereccedilos (sites) ou para uma paacutegina principal dentro de um mesmo
site A barra de navegaccedilatildeo pode ser formada por um conjunto de imagens
identificadas com textos ou apenas por textos
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
11
VViissatildeatildeoo GGeerraall ddoo FFrroonntt PPaaggee
FFoorrmmaass ddee VViissuuaalliizzaaccedilccedilatildeatildeoo Quando o FrontPage eacute aberto a opccedilatildeo de trabalho eacute no modo normal onde eacute
possiacutevel editar todo o conteuacutedo da paacutegina que estaacute sendo criada Existem outros
modos entre eles estatildeo o modo HTML para ver a paacutegina em coacutedigo html e o
modo Preview
Visualizaccedilatildeo usado para ver como a paacutegina funciona em
um browser (navegador)
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
12
FFoorrmmaattaarr ppaacuteaacuteggiinnaass Sempre que eacute iniciado o FrontPage abre um novo trabalho
( nova_paacutegina_1htm)
Comece formatando esta paacutegina
Clique em Arquivo Propriedades
Em propriedades vocecirc pode formatar o tiacutetulo da paacutegina (Guia - Geral) cor de
fundo (Guia - Plano de fundo) cores dos hyperlinks ativo visitado cor do texto
margens superiores e inferior
Caso queira inserir uma figura de fundo marque Figura de plano de fundo
Clique em Procurar selecione uma figura nos formatos Gif ou Jpg
Clique em Ok e veja os resultados
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
13
IInnsseerriirr tteexxttoo A Colocaccedilatildeo do Texto em uma Home Page eacute parte fundamental em um Bom
Site
O Texto deve ser simples e explicativo um bom Site eacute aquele que tem um texto
leve e objetivo a colocaccedilatildeo de um fundo ajuda a embelezar a Paacutegina Alguns
destaques
com cores e marcadores e uma boa diagramaccedilatildeo ajudaraacute na aparecircncia e
compreensatildeo
O Front Page dispotildee de um completo Editor de Texto com formataccedilatildeo de
fontes paraacutegrafos alinhamentos marcadores recuos verificaccedilatildeo ortograacutefica etc
se
vocecirc sabe utilizar o Word natildeo teraacute problemas
Para inserir um texto em sua paacutegina vocecirc natildeo precisa digitar nenhuma linha de
coacutedigo Ex ltFONT FACE= ARIAL COLOR= BLUE SIZE=2gt
O programa cria os coacutedigos necessaacuterios na formataccedilatildeo de fonte cor tamanho de
sua escolha
Digite o texto selecione-o e clique em
Negrito Itaacutelico ou Sublinhado
Clique em
Estilo e Fonte
Veja o coacutedigo de sua paacutegina na Guia Html
Veja a paacutegina jaacute pronta na Guia Visualizaccedilatildeo
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
14
Para salvar esta paacutegina clique em Arquivo Salvar ou clique em
Salvar
Decirc um nome para a paacutegina se natildeo quiser manter o mesmo nome
Escolha a pasta onde tambeacutem deve estar todas as figuras utilizadas na paacutegina
exemplo figura de fundo e clique em Salvar
Feche esta paacutegina
Vamos ver agora como abrir esta mesma paacutegina
Clique em Arquivo Abrir
Procure pela pasta onde foi salvo sua paacuteginahtm e clique em Abrir apoacutes encontra-
la
Outra forma de abrir uma paacutegina eacute clicando em
Abrir
Encontrar a paacutegina e clicar em Abrir
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
15
HHyyppeerrlliinnkkss
Para criar um hyperlink para uma outra paacutegina eacute necessaacuterio que esta paacutegina
exista
Entatildeo clique em Arquivo Novo vocecirc pode escolher um formato
Ex Paacutegina normal Assistente de paacutegina de formulaacuterio ou ateacute mesmo paacutegina de
pesquisa entre outras Mas selecione Paacutegina normal e clique em OK
O FrontPage 2000 cria uma nova paacutegina em branco
Salve esta paacutegina
Vamos linkar esta paacutegina para a outra paacutegina jaacute criada de nome pagina1htm
Vocecirc inserir um Hyperlink para outra paacutegina de vaacuterias maneiras
1ordm clicando em Inserir Hyperlink
Procurando a paacutegina armazenada que foi salva no FrontPage
Selecione a paacutegina e clique em OK
2ordm ou simplesmente pressionando as teclas Ctrl + K
Selecione a paacutegina e clique em OK
3ordm outra forma eacute clicando em
Hyperlink
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
16
Selecionando a paacutegina e clique em OK
Hyperlink para
Paacutegina local paacuteginahtm
Coacutedigo HTML ltA HREF= paginahtm gtPaacuteginaltAgt
Web site httpwwwcursos24horascombr
Coacutedigo HTML
ltA HREF= httpwwwcursos24horascombr gt ApostilasltAgt
Como pode notar sempre que o Hyperlink for para uma paacutegina externa agrave sua ele
obrigatoriamente deveraacute conter http
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
17
Quando vocecirc quiser que abra uma janela para enviar um e-mail sempre que o
visitante clicar em determinado link ele deveraacute ser precedido por mailto
E-mail mailtocursositecursos24horascombr
Coacutedigo HTML
ltA HREF= mailtocursositecursos24horascombr gtE-mail do cursoltAgt
Salve a paacutegina e faccedila os teste necessaacuterio clicando nos Hyperlinks criados
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
18
NNuummeerraaccedilccedilatildeatildeoo MMaarrccaaddoorreess Para usar numeraccedilatildeo selecione todo texto desejado e clique em
numeraccedilatildeo
O texto ficaraacute como no exemplo abaixo
Exemplo de numeraccedilatildeo
1 Apostila Linux
2 Apostila Novell
3 Apostila Unix
4 Apostila Windows
Para retirar a numeraccedilatildeo selecione o texto desejado e clique novamente em
numeraccedilatildeo
Para incluir marcaccedilotildees no texto basta selecionar o texto desejado e clicar em
marcadores
O texto ficaraacute como no exemplo abaixo
Exemplo de marcadores
Linux
Novell
Unix
Windows XP
Uma outra alternativa para trabalhar com Marcadores eacute utilizando o menu
Formatar -gt Marcadores e Numeraccedilatildeo conforme a figura abaixo
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
19
Nesta janela vocecirc pode selecionar com mais opccedilotildees os estilos de Marcadores que vocecirc deseja
utilizar
FFiigguurraass
Vocecirc jaacute aprendeu a incluir figuras de fundo na paacutegina mas vamos aprender incluir
figuras de Cliparts ou uma imagem que vocecirc queira colocar em sua paacutegina
Para inserir uma figura de Cliparts clique em
Inserir Figuras Cliparts
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
20
Selecione um Cliparts adequado e clique em Inserir clipe
Para inserir uma figura de outras pastas clique em
InserirFiguras Do Arquivo
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
21
Basta selecionar a imagem desejada e clicar em OK
Lembrando que apoacutes sua paacutegina estar pronta vocecirc deve enviar junto com ela
todas figuras utilizadas na paacutegina (veremos no segundo moacutedulo como fazer isso)
Vocecirc pode editar as propriedades da sua imagem em
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
22
TTaabbeellaass
As vezes entramos em uma paacutegina feita completamente por tabelas mas essas
tabelas natildeo necessariamente aparecem
A formataccedilatildeo da paacutegina eacute feita por tabelas Isso natildeo impede de criamos tabelas de
preccedilos de produtos artigos em geral
Fundindo ceacutelulas em novas tabelas e criando um visual interessante
Para criar uma tabela clique em
Inserir tabela
Arraste (selecionando) ateacute os quadros que deseja que faccedilam parte da tabela
Jaacute com a tabela na paacutegina selecione algumas ceacutelulas para formataccedilatildeo clique com
o botatildeo direito do mouse Clique em propriedades da ceacutelula para formatar cor de
fundo borda tamanho e cor alinhamento vertical e horizontal etc
O texto das ceacutelulas vocecirc formata usando Negrito Itaacutelico Sublinhado Cor da fonte
Centralizado etc
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
23
Como exerciacutecio tente fazer algo parecido com o exemplo acima com tabelas
MMeessccllaarr cceacuteeacutelluullaass Selecione os quadros clicando e arrastando sobre eles clique com o botatildeo direito
do mouse clique em Mesclar ceacutelulas para fundir uma ceacutelula com outra
No caso de Mesclar ceacutelulas eacute sempre bom formatar a borda da tabela para zero
CCoommppoonneenntteess
Os componentes aqui listados soacute funcionam no navegador da Microsoft
(Internet Explorer)
Usaremos como exemplo trecircs componentes
Office Spreadsheeet Contador de acesso letreiro digital e Botatildeo em foco
Para inserir esses e outros componentes clique em
Inserir Componentesnome do componente ou clique em
Componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
24
OOffffiiccee SSpprreeaaddsshheeeett Capaz de somar subtrair multiplicar dividir da mesma maneira que o Excel
Trata-se de ceacutelulas do Excel que usamos formulas simples ou complexas
Ex C1=B1-A1
O resultado aparece na ceacutelula C1 apoacutes pressionar a tecla enter
CCoonnttaaddoorr ddee aacceessssoo Como o nome jaacute diz faz uma contagem de visitantes em sua paacutegina
Use um dos vaacuterios modelos
Marque Redefinir contador para 1
O contador soacute eacute executado no servidor com sua paacutegina pronta e recebendo visitas
na internet
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes
25
LLeettrreeiirroo ddiiggiittaall Soacute eacute funciona com o Navegador Internet Explorer
Digite o texto desejado no espaccedilo para Texto
Marque a opccedilatildeo que mas lhe agrada em Direccedilatildeo Velocidade Comportamento
Cor de fundo etc
Atenccedilatildeo
No Netscape seraacute exibido apenas um texto fixo sem efeito
BBoottatildeatildeoo eemm ffooccoo Este sim traacutes um efeito bem interessante que eacute executado tanto no Internet
Explorer como no Netscape
Digite o Texto do botatildeo que seraacute visualizado por todos visitantes da paacutegina
Em Vincular a clique em Procurar escolha a paacutegina que deseja que este botatildeo
ao ser clicado abra
Selecione uma Cor do botatildeo Cor do plano de fundo do Efeito cor de efeito e
clique em OK
Clique em
Salvar
Para salvar sua paacutegina
Neste caso foi criado applet que devem ser enviados junto com sua paacutegina
nome fphoverclass
nome fphoverxclass
Vocecirc pode incluir outros efeitos
Experimente outros componentes