INTRODU╟├O
OBJETIVOS DO CURSO
Dar uma
visπo geral da arquitetura WEB
Instalar e
Configurar o FrontPage 98
Criar e
Gerenciar Sites da WEB
Criar e
Editará Pßginas da WEB
1. Conceitos Fundamentais
Relaτπo
Browser xá Servidorá Web
Computador Cliente rodando um navegador
(Comunicator ou Internet
Explorerer)
![](/file/19523/IPRAT_01.iso/tutoriais/HTML/comoconstruir/COMO Construir HomePage_arquivos/image001.gif)
SITE W.W.Wááááááá TCP?IPá + HTTP
![](/file/19523/IPRAT_01.iso/tutoriais/HTML/comoconstruir/COMO Construir HomePage_arquivos/image002.gif)
Computador Servidor rodadndo um Software servido de Rede
(IIS, EMTERPRISE
SERVER, WEB SITE, APACHE etc,)
Diret≤rio raiz dos documentos HTML
Cada servidor Web usa um diret≤rio raiz como padrπo
para armazenar as pßginas WEB.
IIS - Internet Information Server da Microsoft:áá (C:\inetpub/wwwroot\)
Fast Track e Enterprise Server da Netscape:á (C:\netscape\suitespodocs\)
Apache HTTPDá para
Unix:á (/usr/local/etc/httpd/htdocs/)
Abaixo do diret≤rio raiz sπo instalados os
documentos htmlá dos Sites clientes.
Componentes Principais do FrontPage98
Lado Cliente (Browser):
a)FrontPage Explorer -
Criaτπo e Gerenciamento de sites Web.
b)FrontPage Editor - Criaτπo
e Ediτπo de Pßginas HTML (WYSIWYG).
Lado Servidor:
a)Personal Web Server - Servidor Web de baixa
capacidade Front Page Server Extensions.
b)Programas especiais
instalados no servidor Web que garantem todaá
a funcionalidade do FrontPage.á
Sem as extens⌡es do
FrontPage98 instaladas no servidor, alguns componentes nπo funcionarπo em
pßginas construidas com o FP98.
VocΩ poderß baixar as extens⌡es
do FP98á gratuitamente do endereτo:
http://microsoft.com/frontpage/wpp/exts.htm
Para
informaτ⌡es detalhadas sobre as extens⌡es visite:
http://www.microsoft.com/frontpage/wpp/serk/default.htm
Quando da instalaτπo do Front Page98 em sua
mßquina, Θ criado um ambiente WEB.
O servidor Personal Web Server Θ instalado e
o seu diret≤rio raiz Θ:
C:\FrontPage Webs\Content\ - Pasta onde ficam todos os
Sites criados no FrontPage98.
Hostname:80áá (hostname Θ o nome de sua mßquina).
Para um Site funcionar corretamente,
esteá deverß ser instalado (publicado)
abaixo desse diret≤rio raiz do Servidor WEB.
OBS. VocΩ poderß tambΘm criar sua pßgina em
qualquer local do disco e posteriormente transferir (publicar) para um
diret≤rio abaixo do diret≤rio raiz do Servidor, como explicado anteriormente
Outros
Diret≤rios do FrontPage98
C:\FrontPage
Webs\Server
Neste Diret≤rio encontra-se instalado o
Servidor de WEB do Front Page:
Microsoft FrontPage Personal WEB
Server (Vhttp32.exeá -á Servidor Web)
C:\Arquivos de programas\Microsoft
FrontPage\Bin
Nesta Pasta estπo instalados
todos os Programas do Pacote do FrontPage
Entre eles:
a)FrontPage Editor (fpeditor.exe)
b)FrontPage Explorer (fpexplor.exe)
c)FrontPage Server (Administraτπo e
Configuraτπo do Servidor) (fpsrvwin.exe)
d)FrontPage
Server (Atalho para rodar o Servidor) (vhttpd32.exe)
OBS. Para evitar problemas de
endereτos use sempre:
Letras min·sculas, nπo use
espaτos, nπo acentue jamais.ááá
Endereτos Importantes para Desenvolvedores de Sites:
1.Imagens/ Fundos
e Clips
http://www.microsoft.com/clipgallerylive
http://microsoft.com/gallery/files/images/default.htm
2.Texturas e
Backgrounds:
http://www.sfsu.edu/~jtolson/textures/textures.htm
http://www.meat.com/textures
3.Som nas
Paginas:
http://www.deol.ru/~queen/jalfrezi/tnt.htm
4.Streaming de
audio e video:
http://www.microsoft.com/ntserver/netshow
http://www.real.comáááá (Real audio e real vφdeo)
5.Programas CGIs
para Formulßrios e Bases de Dados.
Programaτπoá CGI
http://www.builder.com/programiming/cgi
6.Programaτπo em
Perl
http://www.builder.com/programming/perl
7.Acesso a base
de dados
http://www.builder.com/programming/databases
8.Base de Dados
usando ASP da Microsoft
http://support.microsoft.com/support/kb/articles/q175/7/70.asp
9.Base de Dados
usando Cold Fusion
http://www.allaire.com
2. O FrontPage
Explorer
O
Front Page Explorer Θ o ponto de partida para a criaτπo de um Site.
VocΩ
poderß usar diretamente o FrontPage Editor, mas nπo terß uma ferramenta para
gerenciar e automatizar todo o seu Site.
Com
o Front Page Explorer vocΩ poderß visualizar a estrutura hierßrquica do Site,
inserir novas pßginas automaticamente no Site, publicar o Site em um Provedor
da Internet. Quando uma nova Pßgina Θ inserida no Site pelo Explorer,
automaticamente serß incluida um botπo de navegaτπo na barra de bot⌡es compartilhado.
(Shared Border).
Quando vocΩ inicia o FrontPage Explorer a janela principal Θ
mostrada.
Tela principal do FrontPage98 Explorer
A Janela Principal Θ formada pelas seguintes partes:
Barra de Menus
Barra de Ferramentas
Area de visualizaτπo
Barra Views - α esquerda
Na Janela Central Getting
Started vocΩ poderß indicar um WebSite existente para abrir, criar um novo
WebSite ou abrir o ·ltimo WebSite.
Abrir um Site Existente
Escolha o Site na Janela de
Tφtulos e a sua estrutura serß mostrada na Janela de Visualizaτπo.
Criar um novo Site
Ao escolher criar um novo
Site a janela New Front Page Web (fig. abaixo) serß mostrada para definir:
a)Modelo do Site ( Sπo 6 os
modelos existentes)
b)Site de uma ·nica Pßgina
c)Importar um Site
existente
d)Titulo da Home Page do
Site que serß criado
e)Diret≤rio ou Pasta onde
serß criado o Site. Obs. VocΩ pode criar o Site em qualquer pasta, ou no
localhost (nome de sua mßquina)- Diret≤rio raiz do seu servidor local.
http://MeuPC/MeuSite/index.htm
Jan Janela New Front Page WEB
AtravΘs do FrontPage Explorer
vocΩ poderß tambΘm:
Abrir um Site Existente
Visualizar um Site de diversos modos atravΘs
da Barra View α esquerda
Modificar os Links entre as diversas pßginas
do Site
Criar
pßginas em branco
Modificar
a estrutura do Site
Chamar
o FrontPage Editor para editar uma pagina especφfica
A Barra View α esquerda na janela principal tem as opτ⌡es:
Foldersá -
Visualiza todas as pastas do Site, a sua estrutura de diret≤rios.
All Files - Visualiza todos os arquivos
do Site.
Navigation - Visualiza o Site atravΘs de
um diagrama de blocos (pßginas).
Hiperlinksá - Visualizaτπo dos links entre todas as pßginas do Site.
Themesá - Entra no modo temas, mostra todos os temas disponφveis para o
Site. Um Tema Θ um padrπo que o FrontPage adota para todo o Site, bot⌡es,
cores, marcadores, linhas, background etc. Existe aproximadamente 50 temas
diferentes.áááá
Tasksá -á Editor de Tarefas. VocΩ
marca as tarefas concluidas, e por concluir no Site, faz um gerenciamento no
desenvolvimento do Site.
Obs. Na janela de visualizaτπo do Site Clique
em um dos bot⌡es para classificaτπo das pßginas por ordem alfabΘtica de nome,
titulo, tamanho, tipo e data.
Barra View
Barra de Bot⌡es de Visualizaτπo do
FrontPage Explorer.
áá
Barra de ferramentas do FrontPage
Explorer.
Opc⌡es da Barra de Menu do
FrontPage Explorer.
File
New
Page -
Cria uma nova pßgina no WebSite corrente
Task -
Cria uma nova tarefa para a janela de tarefas
Folder -
Cria uma nova pasta.
Open FrontPage Web -
Abre um Site existente
Close FrontPage Web -
Encerra um Site que estß aberto.
Publish FrontPage Web -
Publica (Transfere para o Servidor) um Site que estß aberto. Deverß ser
especificado uma pasta abaixo do diret≤rio raiz do servidor, no caso de
servidor local este diret≤rio raiz serß:
C:\Front
Page Webs \Contents
Para um Site do
Front Page Funcionar corretamente, terß que ser publicado pelo Explorer, pois
ele transfere todas as pastas do Site para o Provedor da Internet.
VocΩ tambΘm
poderß transferir todas as pastas e subpastas por FTP.
Delete Front Page Web -
Exclui um Site
Importá -á
Importa um Site para um Front Page Web Site. Uma Janela de Assistente
irß conduzir os passos da importaτπo.
Export -
Exporta o arquivo de uma Pßgina Web completa.
Page Setup -
Configuraτπo de Impressπo
Print Previw -
Imprime, no modo de visualizaτπo Navegaτπo.
Print Navigation View -
Imprime a estrutura de navegaτπo.
Edit
Opτ⌡es de Ediτπo Padrπo.
View
Opτ⌡es de visualizaτπo correspondentes as da
Barra de Visualizaτπo.
Rotate -
Inverte a orientaτπo horizontal/vertical do diagrama de navegaτπo
Size to Fitá - Ajusta o diagrama ao tamanho da Tela.
Refleshá - Atualiza a exibiτπo do Site ap≤s qualquer
alteraτπo em uma Pßginaá (F5).
Tools
Spelling -
Palavras para pesquisa no Dicionßrio.
Find -
Procura palavra no Site
Replace -
Substitui palavras no Site
Hiperlinks -
Atualizaτπo dos Hiperlinks
Shared Borders -
Determina a posiτπo e os tipos de bordas para o Site Inteiro.
Show Front Page Editor -
Chama o FP Editor. O FP Editor poderß tambΘm ser chamado do botπo
correspondente na Barra de Ferramentas, ou dando um duplo Clique no arquivo ou
bloco da janela de visualizaτπo no modo navegaτπo.
Web Settingsá Seta parΓmetros diversos para o Site:
Varßveis, Linguagem, Titulos, e outros.
Permission -
Controle de acesso ao Site, para usußrios e grupos
Change Password -
Subsitui a senha atual do Site corrente
Option -
Opτ⌡es de Configuraτ⌡es para o FP Editor e FP Explorer.
3. O FrontPage Editor
O
Front Page Editor Θ o ambiente de criaτπo ou ediτπo de Pßginas. Ele pode ser
ativado do FPExplorer ou isoladamente.
Opτ⌡es
da Barra de Menu
╖
File
╖
New
Cria uma Nova Pßgina ou um novo de Frame de Pßgina,
em branco ou usando um dos mais de 60 modelos de Pßginas que o Front Page98
disp⌡e. Se escolher um dos modelos, poderß posteriormente editar e alterar a
Pßgina.
╖
Preview in Browser
Mostra a Pßgina como funcionaria em um Browser.
╖
Page Properties
Define as propriedades da Pßgina.
╖
Edit
Opτ⌡es comuns do menu Edit
╖
View
Visualizaτ⌡es das Barras de Ferramentas do FrontPage
Editor
╖
Insert
Opτ⌡es para inserir diversos componentes na Pßgina, Linhas,
Figuras, Componentes Ativos, Banco de Dados, Formulßrios, Tabela de Conte·do do
Site e Barra de Navegaτπo.
Uma Barra de Navegaτπo, quando inserida no Site
automatiza a navegaτπo pelas diversas Pßginas que comp⌡e o Site.
Barra de
Navegaτπo
As Barras de Navegaτπo podem ser colocadas na borda Horizontal ou
Vertical, em forma de bot⌡es ou texto, Os bot⌡es da Barra de Navegaτπo
apresentados sπo os relativos ao Tema escolhido para a Pßgina ou Site. Os
Bot⌡es de Navegaτπo podem apresentar as opτ⌡es de navegaτπo para os diversos
nφveis hierßrquicos, como mostra a figura.
Os Componentes e Elementos Ativos sπo programas
automatizados inseridos na Pßgina. Os Componentes e Elementos Ativos
serπo vistos posteriormente
╖
Format
Parßgrafo, Fontes, Animaτπo e Temas
A Formataτπo de Temas permite inserir um Tema na
Pßgina ou no Site Todo.
Um Tema Θ um padrπo ou estilo de texto,
figuras, fundo, linhas, marcadores para a Pßgina ou para todo o Site. O FrontPage98
disp⌡e de mais de 40 Temas diferentes, que embelezam e dπo um toque especial ao
Site.
Para Definir um Tema para o Site ou para
a Pßgina use o FrontPage Explorer, o Menu Format do FrontPage Editor, ou o
Botπo direito do Mouse na Pßgina.
o
Com o Botπo direito do Mouse na Pßgina podemos tambΘm definir as
propriedades da Pßgina e da Borda Compartilhada.
╖
Tools
Ferramentas de Verificaτπo ortogrßfica
Shared Border
o
Shared Border sπo bordas compartilhadas inseridas na pßgina ou
em todo o Site, atravΘs dessas bordas se colocam as barras de navegaτπo do
Site.
╖
Table
Opτ⌡es para criaτπo de Tabelas
que serπo vistas posteriormente.
╖
Frames
Opτ⌡es para utilizaτπo de Frames
no Site.
╖
No rodapΘ das Pßginas aparecem 3 abas que seleciona o modo de
exbiτπo da Pßgina:
Normal, HTML que mostra o
c≤digo da Pßgina e Visualizaτπo (como ficaria
em um Browser).
4. Inserindo Textos com o FrontPage98.
A Colocaτπo do Texto em uma
Home Page Θ parte fundamental em um Bom Site.
O
Texto deve ser simples e explicativo, um bom Site Θ aquele que tem um texto
leve e objetivo, a colocaτπo de um fundo ajuda a embelezar a Pßgina. Alguns
destaques com cores e marcadores, e uma boa diagramaτπo ajudarß na aparΩncia e
compreensπo.
O
Front Page disp⌡e de um completo Editor de Texto, com formataτπo de fontes,
parßgrafos, alinhamentos, marcadores, recuos, verificaτπo ortogrßfica, etc, se
vocΩ sabe utilizar o Word, nπo terß problemas.
Inserindo
Hyperlinks
Um HyperLink Θ uma ligaτπo
de um ponto a outro na mesma Pßgina ou em um lugar qualquer da Internet. O
ponto de ligaτπo poderß ser um texto, uma figura ou um objeto qualquer que
aceite hyperlink.
Para
Inserir um Link em um determinado ponto da Pßgina, selecione o texto ou o Objeto,
clique
no φtem hyperlink do menu Inserir ou no Botπo
da
Barra de Ferramentas.
Na
Janela Criar Hyperlink especifique o endereτo do Link, ou clique no Arquivo
htm.
Janela
Criar Hiperlink
Inserindo
Marcadores (Bookmark)
Um Bookmark ou
marcador Θ uma marca que se coloca em um determinado ponto da pßgina, ao qual
poderß ser especificado um link, (salto).
Veja o Optional
Bookmark na Janela acima.
Ex. O texto
destacado em azul e sublinhado a seguir Θ um link para um
Marcador colocado na ·ltima linha deste texto identificado por Marcador.
.
Faτa
a Prßtica sugerida, inserindo e formatando o texto em
cada uma das Pßginas do seu Site.
Ap≤s
a diagramaτπo e inserτπo do texto a que se prop⌡e a Pßgina, torne-a mais
atraente com inserτπo de Grßficos, Fotos, Imagens,
Banners, Bot⌡es Animados, Logotipos, Figuras Animadas, Componentes
Automatizados (Applets Java), Java Script, Contadores, etc.
Imagens e Grßficos dπo um
Colorido especial e destaca sua Home Page.
5.
Inserindo GR┴FICOS e Imagens com o
FrontPage98.
Veja tambΘm o Artigo
sobre esta MatΘria
Imagens e Grßficos dπo um
Colorido especial e destaca sua Home Page.
Logotipos Comerciais,
Banners,á Pinturas, Mapas, Fotos,
Animaτ⌡es etc.
Os Grßficos usados em
Pßginas WEB sπo de 2 tipos ou formatos:
Gif ou Jpeg.
O formato Gif Θ mais usado
em bot⌡es, φcones, barras e fundos.
O format Jpeg em Fotos e
Mapas.
Biblioteca de Imagens:
Rainbow
Collection
Graphx
Kingdom
GIFs
Animados.╔ uma combinaτπo de vßrios arquivos Gifs em um ·nico.
Programas
Grßficos sπo especializados em construir esses arquivos.
Coleτπo On-Line de Arquivos GIFs
animados.
Incluindo
Grßficos do Clip Art do FrontPage e do MS Office
No FrontPage Editor
selecione Insert | Imagem ou Clipart
A Janela Image ou Clip Art
serß exibida para a escolha do Grßfico.
Editando Imagens com a
Barra de Ferramenta Image
Exibindo a Barra de
Ferramenta Image
Insira uma Figura na Pßgina
Clique na figura. A Barra
Imagem aparece na parte inferior da Pßgina.
Barra de ferramentas image
Da esquerda para a direita:
Os φcones
1, 2, 3, 4 e 5 sπo usados na criaτπo de mapas de imagens
6. inclui
texto sobre a imagem
7. definir
cor transparente
8. parte
da imagem
9. altera
a aparΩncia da imagem
10.transforma
a imagem em preto e branco.
11. remove
as alteraτ⌡es feitas
12.
rotaτπo
13.
rotaτπo
14 reflete
horizontalmente
15.
reflete verticalmente
16.
Escurece
17.
Clareia
18. Filtro
de clareiamento
19. filtro
de escurecimento
20. bordas
21. cria
uma nova imagem
Obs. AlΘm desta poderosa
ferramenta de ediτπo de imagem do FrontPage98 vocΩ poderß usar o Programa Image
Composer que acompanha o FrontPage98 para criar e editar imagens com mais
recursos, ou outro programa grßfico qualquer como Paint Shop pr≤, Photo Shop,
Fire Work etc.
Criando Mapas
deá Imagens
Mapas de Imagens sπo
imagens com diversas ßreas clicßveis, cada uma delas apontando para uma URL ou
hyperlink.
Por exemplo o Mapa do
Brasil em que cada estado aponta para o Link correspondente.
Pegue uma Imagem e
selecione as partes clicßveis com as ferramentas 2, 3 ou 4.
Especifique o hyperlink
para cada ßrea clicßvel definida.
Ilumine a ßrea selecionada
com a ferramenta 5. Pronto.
Mapa de Imagem
Ferramentas de Seleτπo
6. Inserindo
Componentes e Elementos Ativos.
O
Front Page98 disp⌡e de vßrios componentes e elementos ativos que podem ser
inseridos em uma Pßgina. Esses Componentes sπo pequenos programas ou scripts
CGI, ou Applets Java que podem ser tratados diretamente pelo FrontPage,
sπo processados no Servidor da Internet e necessitam que estes servidores
tenham instaladas as Extens⌡es
para o FrontPage98. Visite tambΘm para saber mais sobre as Extens⌡es do
FrontPage.
Elementos
Ativos
Sπo comandos incorporados que
acrescentam efeitos especiais interessantes e ·teis α sua Home Page. Eles s≤
existem no Front Page e constituem um conjunto de ferramentas que tornam a sua
Pßgina Interativa.Os Elementos Ativos do FrontPage, sπo programas escritos em Java
ou em CGI
Os Elementos Ativos do Front Page
sπo:
1. Hover Buttons
- Bot⌡es Animados
2. Banner Ad
Manager - (LogoTipo Animado)
3. Marquees
- Letreiros Luminosos
4. Site
Searching - Pßgina de Procura de Conte·do no Site.
5. Hit Counter
- Contador de Acessos α Pßgina.
OBS. Os Elementos
Ativos escritos em Java podem funcionar sem as extens⌡es do Front Page
instalados no Servidor WEB onde ficarß hospedada o Site construφdo, desde que o
programa (Classe) em java seja incluφdo. O programa em Java (Classe) Θ criado
automaticamente pelo Front Page. PorΘm os elementos ativos escritos em CGI
necessitam das extens⌡es no servidor para funcionarem.
Hover Buttons ╔ um Botπo animado.
![](/file/19523/IPRAT_01.iso/tutoriais/HTML/comoconstruir/COMO Construir HomePage_arquivos/image013.gif)
Button
text - Texto que irß aparecer no Botπo
Font
- Estilo da Fonte
Link
to - Link para quando clicar no Botπo
Button
Color - Cor Inicial do Botπo
Effect
- Efeito visual que ocorrerß no Botal quando da passagem do mouse sobre o mesmo
Effect
color - Cor de preenchimento ou do efeito do Botπo
Width
e Height - Tamanho do Botπo
Opτπo
Customizada - Novas Opτ⌡es de efeitos de Som e Imagens sobre o Botπo.
On
clická Faz tocar um som quando
clicar no Botπo
On
hoverá Fazá tocar um som quando passar o mouse sobre o Botπo
Obs. O
arquivo de som deverß ser do tipo au ou snd.
Imagens -
altera a imagem do Botπo.
Banner Ad Manager
╔ um programa Java (Applet) Θ um
conjunto de imagens rolßveis.
Width
e Height - Largura e altura do cartaz.
Transition
- Efeitos especiais de transiτπo entre uma imagem e outra
Link
to - Especificaτπo do Link para a Figura ou Cartaz
Imagens
to Display O conjunto de imagens que serπo mostradas, clique no botπo ADD para
adicionar uma outra imagem.
Obs.
As imagens devem ser Gif ou Jpg e devem ter todas o mesmo tamanho.
VocΩ
poderß fazer cada imagem em um programa Grßfico Paint Shop Pr≤, ou Image
Composer.
Show
Image for (second) - tempo de exposiτπo de cada imagem em segundos.
Marquees
╔ uma Tag em HTML da Microsoft,
nπo Θ um programa em Java nem CGI, portanto s≤ funcionarß no Internet Explorer.
Existem Programas em Java e em
JavaScript para Letreiros que funcionarß tanto no Internet Explorer quanto no
NetScape.
Search Form û Formulßrio de Pesquisa
Permite que os usußrios faτa uma
pesquisa de texto no Site todo. O resultado da pesquisa serß uma indicaτπo da
Pßgina do seu Site que contΘm o texto procurado. Isto Θ bastante ·til em Sites
com grande quantidade de Pßginas.
![](/file/19523/IPRAT_01.iso/tutoriais/HTML/comoconstruir/COMO Construir HomePage_arquivos/image016.gif)
Janela Search Form
Proprierties
O
Elemento Ativo Search Form Θ um programa CGI que roda no Servidor, portanto
necessita das Extens⌡es do Front Page para funcionar.
Informe:
Label for input - Texto
para pesquisa
Tamanho do Texto
Texto do Botπo - Start
Texto do Botπo - Reset
Hit Counter
╔ um contador de Acessos α
Pßgina.
![](/file/19523/IPRAT_01.iso/tutoriais/HTML/comoconstruir/COMO Construir HomePage_arquivos/image017.gif)
Janela Hit Counter
Proprierties
Selecione
um dos tipos da caixa de dißlogo.
Reset
counter to - Determina o n·mero inicial para a contagem de acessos
Fixed
number of digit - Determina o n·mero de dφgitos do contador
O Contador
Θ um programa que usa CGI e necessita das extens⌡es do FrontPage no Servidor.
7.
Inserindo Formulßrios com o
FrontPage98.
Veja tambΘm o Artigo
sobre esta MatΘria
Um
formulßrio Θ um elemento de comunicaτπo e interatividade da Pßgina com o
visitante.
╔
uma interface para troca de informaτ⌡es.
Os
informaτ⌡es contidas nos formulßrios sπo processadas no Servido da WEB por
programas especiais em CGI, portanto o Servidor da WEB deverß ter as extens⌡es
para o FrontPage.
VocΩ
poderß criar os formulßrios simples ou sofisticados usando o FrontPage,
inserindo os itens de formulßrios ou usando o Assistente de Formulßrios do Menu
File New Page Form Page Wizard do Front Page
Editor.
Para
criar um formulßrio item por item, use o Menu Insert
Form Field
Opτ⌡es de Campos de Formulßrios
Caixa
de Texto de uma Linha
Caixa
de Texto de vßrias linhas
Caixa
de marcaτπo
Botπo
de Rßdio
Caixa
Drop-Down Menu
Botπo
Imagem
Label
Um Formulßrio Simples com Todos os Campos
Inserindo
Um campo em um Formulßrio
Selecione no
Menu ou na Barra de Ferramentas de Formulßrios, o item de Formulßrio (Form
Field) que vocΩ deseja.
Ap≤s incluir
o item no Formulßrio, vamos alterar suas propriedades.
Selecione o
item recΘm incluφdo e clique com o botπo direito do mouse, ative a caixa
de dißlogo Form Field Properties.
Propriedades da Caixa de Texto de uma
linha
Na caixa de Propriedades do campo selecionado,
especifique:
Name - nome do
campo, para o programa CGI.
Initial Value -
valor Inicial para o campo
Width - Tamanho da
Caixa de Texto
Password -
Yes - No - Se o campos for uma senha aparecerß asteristicos na caixa de
texto.
Tab Order - Ordem
de Tabulaτπo do Campo.
Botπo Validade -
Botπo de Validaτπo para este Campo.
Clicando no
Botπo Validade, aparecerß a Janela de Validaτπo do Campo.
Caixa de Validaτπo do Campo
OBS. O processo
se repete para o todos os campos inseridos no formulßrio.
1. Inserir um
Campo
2. Alterar as
propriedades do Campo
3. Validar o
Campo
Procedimento para enviar os
Dados do Formulßrio.
Ap≤s ter sido criados todos
os campos do Formulßrio e de termos definido suas propriedades e validaτ⌡es,
precisamos enviar os dados para serem processados pelo Servidor de WEB atravΘs
de CGI.
Ativamos a caixa de
Propriedades Form Properties, clicando com o botπo direito do mouse no
Formulßrio.
Caixa de Propriedades do Formulßrio
Enviar os Dados para um
arquivo ou Endereτo de E-mail
Se for para um Arquivo
informe o nome do Arquivo e o seu caminho no campo File Name.
Se for para um Endereτo de
E-mail informe o endereτo no campo E-mail Address.
Obs. O Servidor WEB onde
ficarß sua pßgina deverß estar apto a processar formulßrios do FrontPage.
O Campo Send to Other -
Enviar para outros - significa que poderemos enviar nossos dados para serem
processados por Scripts CGIs e ASP para integraτπo com Banco de Dados,
(Comercio Eletr⌠nico).
8.
Inserindo Tabelas com o FrontPage98.
Veja tambΘm o Artigo
sobre esta MatΘria
Tabelas
em uma Pßgina WEB proporciona uma melhor distribuiτπo das informaτ⌡es, organiza
e estrutura o layout da Pßgina. AtravΘs de uma boa diagramaτπo com as Tabelas
poderemos produzir excelentes Pßginas. Imagens, Grßficos, Textos e outros objetos podem ser inseridos
nas linhas e colunas de uma Tabela.O Processo de inserτπo de Tabelas Θ similar
ao utilizado no Word.
Criando
uma nova Tabela.
Antes
de iniciarmos a criaτπo de uma Tabela, devemos ter em mente o objetivo da
Tabela, qual ou quais informaτ⌡es queremos ter em uma Tabela, em seguida
fazemos uma diagramaτπo do layout da Tabela em papel.
Menu Table - Tabela
Insert
Table
Draw Table
Draw Table - VocΩ poderß desenhar a estrutura da Tabela, com Linhas
e Colunas.
Insert Table - VocΩ especifica as propriedades da nova Tabela.
Propriedades da tabela.
Linhas, Colunas,
Alinhamento, Bordas, espaτo entre a borda e o texto, espaτamento entre as
cΘlulas, e o tamanho da tabela em Pixel ou em percentual da janela principal.
Ap≤s ter
criado sua Tabela, poderß alterar suas propriedades.
Propriedades
da Tabela
VocΩ poderß modificar as propriedades padrπo da Tabela criada.
Alterar
as cores de fundo da Tabela, e as cores das bordas internas e externas, com
esse recurso vocΩ poderß dar uma aparΩncia tridimensional a Tabela.
VocΩ poderß
tambΘm alterar as propriedades da cΘlula.
Veja a Janela de
Propriedades de CΘlulas abaixo
Janela de Propriedades da CΘlula
Cor das Bordas -
Borda da CΘlula, externa e interna.
Mesclar Linhas -
Cell Span - Number of Rows Spanned - Quantas linhas uma cΘlula poderß mesclar.
Uma
CΘlula atravessando duas Linhas
Mesclar Colunas
- Cell Span - Number of Columns Spanned - Quantas Colunas uma CΘlula poderß
mesclar.
Uma
CΘlula atravessando trΩs Colunas
9. PR┴TICA
Vamos criar um Site Completo para publicaτπo na WEB.
1.
Execute o FrontPage Explorer
2.
a)Na primeira Janela que aparecer escolha cirar um Novo Site de
uma Pßgina.
b)Especifique o Tφtulo do Site
c) Especifique a pasta
d)Crie novas Pßginas no Menu File New, ou no
botπo new ba Barra de Ferramentas. Procure montar a Estrutura de Site mostrada
na figura abaixo.
e)Renomeie os arquivos htm para os nomes da
figura, renomeie os Tφtulos das Pßginas.
f)Na Janela View, escolha a Visualizaτπo de
Temas e escolha um Tema para o Site.
g)No Menu Tools, especifique a Shared Border
(Borda Compartilhada) para exibiτπo dos Bot⌡es de Navegaτπo.
OK a Estrutura do Site jß
estß montada.
╔ um Site com recursos
automatizados, utilizando um Tema ·nico, com barra de Bot⌡es de Navegaτπo.
Agora
vamos a tarefa de Editar cada Pßgina, personalizado o Site, pßgina a pßgina.
Execute
o FrontPage Editor, pelo menu Tools, pela barra de tarefas do FrontPage
Explorer, ou dando clique duplo no retΓngulo da pßgina no diagrama de estrutura
do Site.
Em cada uma das
Pßginas faτa a seguinte tarefa:
1. Inserτπo de Textos
╖
Digite o
texto de sua preferΩncia, formate, coloque marcadores, linhas, plano de fundo.
2. Inserτπo de Imagens
╖
Insira
Imagens, Gifs animados etc.
╖
Insira um
Logotipo Animado (Banner), Menu Insert Active Elements Banner Ad Manager,
escolha as Figuras.
3. Inserτπo de Elementos
Ativos e Componentes
╖
Contador de
Pßgina
╖
Marquee
╖
Hover Button
╖
Formulßrio
de Pesquisa no Site
4. Inserτπo de Tabelas
╖
Faτa uma
Diagramaτπo (layout) para um Texto com Figuras e Fotos, Crie a Tabela e insira
os textos e fotos nas posiτ⌡es, desative as bordas, faτas os ajustes na Tabela.
5. Criaτπo de Formulßrio
╖
Crie uma
Pßgina de Formulßrio com todos os tipos de Campos.
╖
Modifique as
propriedades dos Campos e do Formulßrio
╖
Faτa a
validaτπo de Todos os Campos.
╖
Especifique
a resposta do formulßrio para E-mail.
Este Trabalho foi desenvolvido pelo
Professor Amaro Evaldo de Deus