aprenda a fazer um site -...

25
A A p p r r e e n n d d a a a a F F a a z z e e r r u u m m S S i i t t e e Módulo I Parabéns por adquirir um curso dos Cursos 24 Horas. V ocê está investindo no seu futuro! Nós esperamos que o curso traga os melhores resultados possíveis. Atenciosamente Equipe Cursos 24 Horas

Upload: others

Post on 04-Nov-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 2: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 3: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 4: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 5: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 6: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 7: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 8: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 9: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 10: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 11: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 12: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 13: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 14: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 15: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 16: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 17: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 18: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 19: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 20: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 21: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 22: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 23: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 24: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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

Page 25: Aprenda a Fazer um Site - files.notbetoshow.webnode.com.brfiles.notbetoshow.webnode.com.br/200000002-6f10a7005a/site1.pdf · 1. Através de um cliente Web (também chamado de browser),

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