Vous êtes sur la page 1sur 56

UNIVERSIDADE FEDERAL DO PARAN

PR-REITORIA DE RECURSOS HUMANOS E ASSUNTOS ESTUDANTIS


COORDENAO DE DESENVOLVIMENTO DE RECURSOS HUMANOS
UNIDADE DE QUALIFICAO










FRONTPAGE 2000
Mdulo II



Hamilton Chaiben









CURITIBA

2000

ii
Sumrio
Trabalhando com o Microsoft Image Composer......................................... 4
Criando Efeitos com o Microsoft Image Composer....................................... 5
Objetos de Imagem.................................................................................... 6
Ciclo de Trabalho.................................................................................... 8
Alterando as Cores ................................................................................. 8
Fazendo Recortes................................................................................... 9
Criando Sombras.................................................................................. 10
Questes para reviso................................................................................ 11
Desafio........................................................................................................ 11
Resumo do captulo.................................................................................... 12
Trabalhando com mapas de imagens........................................................ 13
Criando reas interativas com o FrontPage 2000....................................... 14
Inserindo uma imagem ............................................................................ 14
Identificando as reas interativas............................................................. 15
Questes para reviso................................................................................ 17
Desafio........................................................................................................ 17
Resumo do captulo.................................................................................... 18
Efeitos de animao com DHTML .............................................................. 19
Boto em foco............................................................................................. 20
Botes Customizados.............................................................................. 21
Adicionando efeitos de som para os Botes em foco ........................... 22
Outras consideraes sobre os botes em foco...................................... 22
Gerenciador de anncios em faixa ............................................................. 23
Letreiro digital ............................................................................................. 24
Animao de outros elementos da pgina.................................................. 26
Efeitos de transio de pgina.................................................................... 27
Questes para reviso................................................................................ 29
Desafio........................................................................................................ 29

iii
Resumo do captulo.................................................................................... 30
Trabalhando com Estilo .............................................................................. 31
Usando Folhas de Estilo em Cascata ou CSS............................................ 32
Folha de estilos incorporada.................................................................... 32
Folha de estilos externa........................................................................... 34
Vinculando a folha de estilos ................................................................ 36
Estilos In-line............................................................................................ 37
Exemplos de uso de Folhas de Estilo em Cascata..................................... 38
Alterar a cor da barra de rolagem............................................................ 38
Alterar a forma do cursor ......................................................................... 39
Outros efeitos usando Estilos com DHTML ............................................. 39
Efeito de brilho...................................................................................... 39
Formulrio colorido ............................................................................... 40
Efeito de sombra................................................................................... 40
Efeitos em Hiperlinks ............................................................................ 40
Questes para reviso................................................................................ 41
Desafio........................................................................................................ 41
Resumo do captulo.................................................................................... 42
Trabalhando com Banco de Dados............................................................ 43
Active Server Pages (ASP)......................................................................... 44
Integrando o FrontPage com banco de dados usando ASP....................... 47
Gravando informaes em um banco de dados MS Access ................... 48
Acessando informaes de um banco de dados MS Access .................. 52
Questes para reviso................................................................................ 54
Desafio........................................................................................................ 54
Resumo do captulo.................................................................................... 55
Referncias Bibliogrficas.......................................................................... 56

1
Trabalhando com o Microsoft
Image Composer


Neste captulo voc aprender algumas caractersticas do
programa de tratamento de imagens - Microsoft Image Composer -
que faz parte do pacote de software Microsoft FrontPage 2000. As
imagens tratadas com este programa sero usadas para compor a sua
pgina da Web.

Objetivos

Ao completar este captulo voc dever ser capaz de:

1. Conhecer o ambiente do Microsoft Image Composer.

2. Criar efeitos bsicos em imagens, como sombras,
transparncias, etc.

3. Fazer recortes e composies com outras imagens.


5
Criando Efeitos com o Microsoft Image Composer
O Microsoft Image Composer facilita a criao de imagens para utilizao em
websites, CD-ROM, vdeos, e outros meios. Com Image Composer, voc poder:
1. Trabalhar com recursos variados, incluindo imagens escanerizadas, clip-
arts, criaes originais com o prprio Image Composer, e outros.
2. Criar visuais profissionais atravs de centenas de efeitos com um simples
clique do boto do mouse.
3. Produzir resultados rapidamente, como botes para pginas web, com
ferramentas como o Button Wizard.


4. Salvar seus resultados nos formatos mais populares, e deixar o Image
Composer ajudar voc com o Save atravs do Web Wizard.



6
A figura abaixo mostra a tela do Image Composer com a indicao dos
recursos da barra de ferramentas.
Objetos de Imagem
Composies so objetos de imagem. No Image Composer, objetos de
imagem so chamados de "sprites". Um sprite tem forma e transparncia, como
mostrado na figura abaixo. Uma vez que sprites so objetos, voc pode utilizar o
mouse para mov-los, na rea de trabalho assim como voc move os cones no
ambiente Windows. Cada sprite delimitado por um espao retangular chamado
de "bounding box". Este "box" representa um quadro de referncia e as setinhas
representam o que voc pode fazer com o "sprite", tal como redimensionar ou
rotacionar. Voc pode ainda combinar "sprites" temporariamente ou
permanentemente.

Seleo
Arranjo
Recorte
Texto
Formas
Pintura
Efeitos
Transferncia de textura
Zoom
Reposiciona janela
Sintonia das cores
Espao da rea de
trabalho

7
Muitas vezes, o que voc no pode ver to importante quanto o que voc
pode ver. Com o Image Composer, o que voc pode ver depende da transparncia,
que uma propriedade dos "sprites". Transparncia especificada em nveis de
opacidade, de 0% (completamente transparente) at 100% (completamente opaco).
Isto realizado no canal Alpha, que trabalha a opacidade da mesma forma que os
canais vermelho, verde e azul trabalham as cores. Vrios efeitos e ferramentas tm
controle de opacidade. Voc pode usar transparncia de vrias maneiras, incluindo:
Utilizao de transparncia para pintar como se fosse uma cor.
Apagar pores de um "sprite" variando as percentagens da
opacidade.
Deixando um fundo de uma pgina Web ser mostrada atravs de um
"sprite".

A figura a seguir mostra um exemplo do uso de transparncia em uma poro
retangular da imagem.


8
Ciclo de Trabalho
Trabalhar com o Image Composer simples. Sua interface grfica bastante
intuitiva e encoraja voc a usar os seus recursos. Os passos normalmente utilizados
quando voc est trabalhando com o Image Composer so:
1. Inserir ou abrir uma imagem, ou criar um novo "sprite".
2. O prximo passo selecionar o "sprite".
3. Escolher o efeito ou ferramenta que voc quer usar.

NOTA
Clique o boto Apply como o passo final para a maioria dos efeitos e
ferramentas. Se voc ficar insatisfeito com o resultado, clique Undo e
aplique novos efeitos.
Alterando as Cores
As cores podem transmitir emoo e informao num relance, de uma
maneira que poucas outras coisas conseguem. No Image Composer, voc pode
trabalhar com uma cor selecionada em vrias aplicaes, incluindo vrios efeitos. O
Color Swatch na base da caixa de ferramenta, mostra a cor atual. Alterando esta
cor no altera a cor que voc v em seu "sprite" atual at voc realizar uma ao.
Para alterar a cor atual, siga os seguintes passos:
1. Clique com o boto direito do mouse no Color Swatch para mostrar o
Color Picker compacto, como na figura abaixo. Clique com o boto
esquerdo do mouse no Color Swatch para mostrar o Color Picker
completo.
2. Clique o crculo no meio da matriz de cores e arraste para a cor que voc
quer que altere.

9
3. Clique OK. A nova cor que voc escolheu ser a cor que ser aplicada a
todas as aes futuras.
Fazendo Recortes
Uma tarefa comum na criao de imagens recortar uma poro do "sprite".
Usar o recorte como um "sprite" separado, como uma mscara enquanto estiver
aplicando um efeito, como uma base para animaes, e muito mais. Assim como
muitas ferramentas, as ferramentas de recorte encontram-se na paleta de
ferramentas. Clique no boto Cutout na caixa de ferramentas para ativar a paleta da
ferramenta Cutout. Criar recortes em formatos comuns ou em formas livres. A figura
seguinte mostra uma foto original, um recorte feito com a ferramenta curva sobre um
novo "sprite" e finalmente um recorte feito com a ferramenta oval.

Os passos envolvidos na criao dos recortes so simples:
1. Selecione o objeto que voc quer recortar.
2. Ento clique no boto Cutout na caixa de ferramentas.
3. Selecione uma ferramenta de recorte para utilizar. Selecione a poro que
voc quer, corte esta poro, e pronto!

10
Criando Sombras
Uma das maneiras mais fceis de criar um efeito de profundidade e impacto
em uma imagem utilizar um pouco de sombra. Com Image Composer, voc pode
criar sombras em qualquer cor, nvel de transparncia, ngulo da fonte de
iluminao, e grau de firmeza nos traos. As trs figuras abaixo mostram diversas
variaes da utilizao do efeito Drop Shadow.




Resumidamente, os passos bsicos para criar este efeito so:
1. Selecione o sprite.
2. Na caixa de ferramenta, clique Effects.
3. Na caixa Category, clique Outlines e ento clique Drop Shadow.


4. Em Details, customize o shadow, ento clique Apply.

11



Questes para
reviso



1. No Microsoft Image Composer, o que um sprite?



2. Quais as formas de recortes de imagem no Microsoft
Image Composer?

Desafio

3. Faa uma composio com duas ou mais imagens e
salve a imagem resultante com o Save for the Web
Wizard. Inclua a imagem final em sua pgina da web.


12

Resumo do
captulo

Como resultado deste captulo, voc deve ser capaz de:


Explicar o ambiente do Microsoft Image Composer.

Criar efeitos bsicos em imagens, como sombras,
transparncias, etc.

Fazer recortes e composies com outras imagens.



2
Trabalhando com mapas de
imagens


Neste captulo voc aprender como criar um mapa de
imagens, que um grfico com uma ou mais reas interativas ou
regies de hiperlink.

Objetivos

Ao completar este captulo voc dever ser capaz de:

1. Mapear uma imagem.

2. Criar reas interativas retangulares, circulares e
poligonais em uma imagem.


14
Criando reas interativas com o FrontPage 2000
No primeiro mdulo do curso de FrontPage 2000 ns vimos como fazer com
que uma imagem funcione tambm como um hiperlink. Mas, possvel tambm
fazer com que a mesma imagem contenha mais de um hiperlink. Este processo de
mapeamento de uma imagem fcil com o FrontPage 2000. Voc precisar
incorporar uma imagem (GIF ou JPEG) em sua pgina web e usar a barra de
ferramentas Figura do FrontPage para indicar as reas interativas sobre a imagem,
junto com o endereo da pgina que sero chamadas.
Inserindo uma imagem
Insira uma imagem em sua pgina web de modo normal (usando o comando
Inserir | Figura na barra de menu). Por exemplo, considere uma figura do mapa do
Brasil como a imagem a ser mapeada, na qual cada Estado brasileiro ser uma rea
interativa.


15
Identificando as reas interativas
Este procedimento feito facilmente se a barra de ferramentas Figura estiver
visvel. Esta barra de ferramentas normalmente aparece quando voc seleciona a
imagem, mas pode tambm ser ativada selecionando o comando Exibir | Barras de
ferramentas | Figura como na figura abaixo.


O seguinte trecho da barra de ferramentas para tratar imagens ser mostrado:





Com a imagem selecionada, clique no boto rea interativa em forma de
polgono, e o ponteiro do mouse mudar para uma forma de lpis. Isto habilitar
voc a definir uma rea interativa poligonal. Ento, s clicar ponto a ponto para
contornar a forma de cada Estado brasileiro. Cada vez que voc terminar de
contornar um Estado, ao soltar o mouse ser mostrada a janela Criar hiperlink na
Selecionar
rea interativa em forma de retngulo rea interativa circular
rea interativa em forma de polgono
Realar reas interativas

16
qual voc poder entrar com o endereo URL da pgina que ser chamada. No se
preocupe se voc no definiu a posio da rea interativa adequadamente, pois
voc poder a qualquer momento edit-la novamente.
Para editar uma rea interativa, clique sobre ela uma vez e ento voc poder
arrastar e manipular as dimenses desta rea. Dando duplo clique sobre a rea
voc poder alterar o endereo URL. Para remover a rea interativa, selecione-a e
pressione a tecla <delete> do teclado.
Observe que quando voc mover o mouse sobre a imagem, o ponteiro do
mouse muda para a forma de uma mo sobre a rea interativa e o endereo URL
correspondente ser exibido na barra de status do navegador.

17



Questes para
reviso



1. Quais so as formas de reas interativas habilitadas na
barra de ferramentas Figura?



2. Qual a vantagem de utilizar o mapeamento de
imagens?



Desafio

3. No editor do FrontPage 2000, insira uma imagem em
sua pgina e faa o mapeamento desta imagem criando
pelo menos dois hiperlinks. Salve o trabalho e teste o
resultado em seu navegador.





18



Resumo do
captulo

Como resultado deste captulo, voc deve ser capaz de:


Utilizar a barra de ferramentas Figura para mapear reas
de uma imagem.

Criar reas interativas retangulares, circulares e poligonais
em uma imagem.



3
Efeitos de animao com
DHTML


Neste captulo voc aprender como aplicar efeitos de
animao com HTML dinmico ou DHTML em elementos da sua
pgina da Web como texto, pargrafos, figuras, botes e letreiros
digitais.


Objetivos

Ao completar este captulo voc dever ser capaz de:

1. Criar efeitos de animao em botes.

2. Criar um Gerenciador de anncios em faixa.

3. Criar um letreiro digital.

4. Usar DHTML para criar efeitos visuais em textos,
imagens e transies de pginas.


20
Boto em foco
O componente Boto em foco uma caracterstica do FrontPage 2000 que
permite criar botes que mudam a forma ou a cor quando o ponteiro do mouse
move-se sobre eles. Para inserir este componente basta clicar em Inserir |
Componente | Boto em foco, como na figura abaixo.



Este tipo de boto muito utilizado para a produo de barra de navegao
para seu web site, como no exemplo abaixo:



O FrontPage tem uma janela Propriedades do boto em foco que permite
especificar as vrias funes e customizar o boto. A figura abaixo mostra as
opes que foram usadas para estes Botes em foco em particular.


21


O campo Vincular a possibilita assinalar o endereo URL da pgina web que
o boto ativar quando for clicado.Observe ainda que h um boto Fonte para voc
alterar a cor e o tipo da fonte, apesar de voc ficar limitado a uma das 4 fontes :
Arial, Courier, Sans Serif or Times Roman. O mximo tamanho de fonte 40
pontos, mas melhor usar tamanho de fonte pequeno. Tambm possvel alterar a
Largura e a Altura do boto. Finalmente, voc ser capaz de especificar a Cor do
boto e a Cor do efeito. O importante garantir que estas cores juntas
proporcionem um bom visual.
No exemplo acima, o efeito Brilho foi utilizado, que ilumina o boto cinza com
uma cor customizada quando o mouse posicionado sobre o boto. Voc agora j
pode testar todos os outros efeitos que podem ser aplicados usando a lista Efeito.
Botes Customizados
Apesar dos efeitos e botes padres darem um resultado muito bom nas
pginas web, algumas vezes voc poder desejar utilizar suas prprias imagens.
Para fazer isto, utilize seu programa grfico favorito, para criar duas imagens
idnticas em tamanho. Voc poder usar tambm a opo Insert | Button na barra
de ferramentas do Microsoft Image Composer para construir seus botes e depois
export-las como GIFs usando o comando File | Save for the Web... da barra de
menu principal. Agora volte para o ambiente do FrontPage, insira um Boto em foco
como descrito anteriormente. Na janela Propriedades do boto em foco, deixe em

22
branco o campo Texto do boto e no altere as opes Cor do boto, Efeito e Cor
do efeito. No esquea de adicionar o endereo URL no campo Vincular a. Agora,
clique no boto Personalizar.... Quando a janela Personalizar aparecer, digite os
respectivos nomes dos arquivos de imagens customizadas nos campos Boto e Ao
focalizar. Volte para a janela principal e garanta que os campos Largura e Altura
esto assinalados com as dimenses compatveis com as imagens customizadas.
Um exemplo de botes customizados mostrado abaixo com as duas imagens lado
a lado. A segunda imagem mostrada quando o ponteiro do mouse passa sobre a
primeira imagem.


Adicionando efeitos de som para os Botes em foco
Se voc mover seu ponteiro do mouse sobre este boto Novidades
mostrado acima, voc poder escutar um som. Os botes em foco no podem
executar arquivos de som no formato popular dos PCs que o formato .wav,
portanto, se seu arquivo de som est neste formato, voc precisar salv-lo num
formato de arquivo tipo.au. Depois, volte para o ambiente do FrontPage, d duplo
clique em seu Boto em foco, ento no boto Personalizar na janela
Propriedades do boto em foco. Voc poder ento entrar com o nome de seu
arquivo no formato de som .au nos campos Ao clicar e Ao focalizar na janela
Personalizar. Para testar o efeito de som, carregue sua pgina em um navegador.
Outras consideraes sobre os botes em foco
Os botes em foco so desenvolvidos em Java, ento os arquivos de
imagens customizadas devem residir em um servidor web [por motivos de
segurana, a linguagem Java incapaz de acessar diretamente arquivos em
disco].

23
Se voc customizar imagens para seus botes, no esquea que Applets
Java no podem ter fundo transparente.
No esquea que Java no suportada por todos os navegadores, ento, se
voc us-las como hiperlinks, voc deve pensar em algumas outras
alternativas de navegao para seu website.
Gerenciador de anncios em faixa
O gerenciador de anncios em faixa um tipo de quadro de avisos que
mostra uma srie de imagens. A medida que cada imagem exibida, um efeito de
transio pode ser aplicado pelo navegador. Voc poder ainda associar um
hiperlink aos anncios. Assim, por exemplo, voc poder usar este recurso para
gerar o interesse do visitante de sua pgina por algum tipo de servio web que voc
est disponibilizando, e enviar o usurio para um outro site quando ele clicar na faixa
de anncio.
Para criar um gerenciador de anncios em faixa siga os seguintes passos:
1. No FrontPage Editor , no menu Inserir, aponte para Componente e ento
clique Gerenciador de anncios em faixa....


2. Na caixa de dilogo Propriedades do Gerenciador de anncios m faixa,
para cada imagem da srie, clique Adicionar... e, na caixa de dilogo
Adicionar figura de anncio em faixa, selecione a imagem do seu website,
seu sistema de arquivo, ou da World Wide Web.

24


3. Para alterar a posio de uma imagem no banner ad, selecione a imagem e
clique Mover para cima ou Mover para baixo.
4. No campo Efeito de transio, selecione o efeito de transio desejado.
5. Para criar um hiperlink, entre com o URL no campo Vincular a, ou clique
Procurar e selecione um hiperlink na caixa de dilogo Selecionar Hyperlink
de anncio em faixa.
6. Opcionalmente ajuste a largura, altura e o tempo para mostrar cada imagem.
7. Clique OK.
Letreiro digital
Um letreiro digital uma regio em uma pgina contendo uma mensagem de
texto que rola na tela horizontalmente. Para inserir um letreiro digital siga os
seguintes passos:
1. No FrontPage Editor, coloque um ponto de insero em uma linha em branco
de texto, ou selecione o texto que voc que mostrar no letreiro digital.
2. No menu Inserir, aponte para Componente, ento clique Letreiro digital...

25


A caixa de dilogo Propriedades do letreiro digital ento mostrada.



3. Na caixa Texto, entre com a linha de texto que ser mostrada. Se voc
selecionou o texto no passo anterior, ento a caixa Texto j conter o texto
selecionado.
4. Ajuste os valores para direo, velocidade do movimento, comportamento,
alinhamento, tamanho, repeties, e cor de fundo.
5. Clique OK.


26
Animao de outros elementos da pgina
Voc pode aplicar animao com DHTML (HTML Dinmico) para qualquer
elemento de sua pgina. O FrontPage 2000 inclui vrios efeitos de animao que
podem, por exemplo, fazer um texto voar em sua pgina web. Para animar um ou
mais elementos da pgina, siga os seguintes passos:

1. No FrontPage Editor, selecione o texto, grfico ou outro elemento qualquer da
pgina para animar.
2. No menu Formatar, escolha Efeitos de HTML dinmico.


A barra de ferramentas de Efeitos de HTML Dinmico ser exibida:


3. Selecione uma das opes de evento e indique qual o efeito que ser
aplicado. Por exemplo, voc poder aplicar o efeito Espiral cada vez que sua
pgina for carregada:

27

Voc poder ainda criar visuais interessantes com textos e imagens usando
estes efeitos de HTML Dinmico como, por exemplo, mudar o tamanho e a cor da
fonte ao passar o mouse sobre o texto.
NOTA
Estas animaes sero mostradas no Microsoft Internet Explorer 4.0 ou
mais recente e em outro navegador que suporte DHTML (Dynamic HTML).
Efeitos de transio de pgina
Voc pode aplicar efeitos de transio em suas pginas. So efeitos que
ocorrero quando o usurio estiver surfando em sua pgina ou quando ele sair de
sua pgina. Para fazer isto, siga os seguintes passos:
1. No FrontPage Editor, no menu Formatar escolha Transio de pgina....


2. Na caixa de dilogo Transies de Pgina, no campo Evento, selecione o
evento que ser realizado quando Entrar na pgina, por exemplo.

28


3. No campo Efeito de transio, selecione o efeito que voc quer aplicar.
4. No campo Durao (segundos) , selecione o tempo em segundos da
durao do efeito.
5. Clique OK.

NOTA
Estas animaes sero mostradas no Microsoft Internet Explorer 4.0 ou
mais recente e em outro navegador que suporte DHTML (Dynamic HTML).

29



Questes para
reviso



1. Como voc faria para criar botes personalizados ou
customizados para o seu website?



2. Crie um hiperlink em sua pgina e aplique um efeito de
HTML dinmico ao hiperlink, de modo que a cor e o
tamanho da fonte sejam alterados.

Desafio

3. Crie uma faixa de anncios (ou banner) para inserir em
sua pgina da Web. Utilize o Gerenciador de anncios
em faixa para controlar o tempo de exposio das
faixas. Voc poder tambm utilizar o Microsoft Image
Composer para criar as imagens das faixas de
anncios.





30



Resumo do
captulo

Como resultado deste captulo, voc deve ser capaz de:


Inserir efeitos de animao em botes em sua pgina da
Web.

Inserir um Gerenciador de anncios em faixa.

Inserir um letreiro digital em sua pgina.

Usar HTML Dinmico para criar efeitos visuais em textos,
imagens e transies de pginas.





4
Trabalhando com Estilo


Neste captulo voc aprender como melhorar a aparncia de
suas pginas atravs da criao de Folhas de Estilos em Cascata, do
ingls Cascading Style Sheets ou simplesmente CSS como
conhecida na Web.


Objetivos

Ao completar este captulo voc dever ser capaz de:

1. Criar folhas de estilo para serem usadas em todo o
seu website.

2. Criar e alterar o estilo de sua pgina da Web.

3. Criar estilos prprios para qualquer elemento HTML
de sua pgina da Web.


32
Usando Folhas de Estilo em Cascata ou CSS
As Folhas de Estilo em Cascata, do ingls Cascading Style Sheets ou
simplesmente CSS como mais conhecido na Web, proporcionam maior controle
sobre a aparncia e a apresentao de suas pginas. Usando CSS possvel
ampliar a capacidade para especificar com preciso o local e a aparncia de
elementos em uma pgina e tambm criar efeitos especiais.
H trs maneiras de usar as folhas de estilos em pginas da Web:
1. Criar uma folha de estilos incorporada em uma pgina.
2. Vincular uma pgina a uma folha de estilos externa.
3. Aplicar estilos in-line a elementos de pgina individuais.
Folha de estilos incorporada
Use uma folha de estilos incorporada quando desejar definir estilos somente
para a pgina atual. Uma folha de estilos incorporada um tipo de folha de estilos
em cascata que incorpora os elementos <STYLE> </STYLE> no cabealho do
documento (entre as marcas <HEAD> e </HEAD> de uma pgina HTML). Os estilos
em uma folha de estilos incorporada s podem ser usados nessa mesma pgina.
Para criar uma folha de estilo incorporada faa o seguinte:
1. Voc pode criar seu prprio estilo clicando no menu Formatar e ento
em Estilo...
2. Na caixa de dilogo Estilos voc poder criar um estilo prprio para a
sua pgina.

33

3. Nesta caixa de dilogo Estilo voc poder escolher qualquer elemento
da pgina como, por exemplo, o primeiro elemento a (lembre-se que o
elemento a o comando HTML para criao de hiperlink). Clique
ento no boto Modificar.
4. Na caixa de dilogo Modificar estilo voc poder associar comandos
de estilo com o elemento selecionado.

34


5. Clique no boto Formatar para aplicar os estilos desejados para o
elemento selecionado. Um pequeno menu aparecer contendo as
opes para modificao de estilos de Fonte, Pargrafo, Borda,
Numerao e Posio.
6. Quando voc clicar no boto OK o FrontPage incorporar no cdigo
HTML de sua pgina o comando <STYLE> apropriado.
Folha de estilos externa
Use uma folha de estilos externa quando desejar aplicar os mesmos estilos
consistentemente em algumas ou todas as pginas em sua Web. Definindo os
estilos em uma ou mais folhas de estilos externas e vinculando-os as pginas, voc
garante consistncia da aparncia em todas essas pginas. Se decidir alterar um
estilo, ser necessrio fazer apenas uma alterao na folha de estilos externa
e a alterao ser refletida em todas as pginas vinculadas a essa folha de estilos.
Geralmente, uma folha de estilos externa usa a extenso do nome de arquivo .css,
tal como estilo.css.


35

Para criar uma folha de estilo externa faa o seguinte:
1. No FrontPage Editor, no menu Arquivo, aponte para Novo... e ento clique
em Pgina...
2. Selecione a guia Folhas de estilos e escolha o estilo apropriado, como na
figura abaixo.

NOTA
Se voc escolher Folha de estilos normal, voc ter uma folha de estilos
em branco e poder criar os seus prprios estilos. Caso voc escolha
outros modelos, voc poder edit-los.

3. Voc pode agora criar seu prprio estilo clicando no menu Formatar e ento
em Estilo...

36


4. Na caixa de dilogo Estilos voc poder criar seu prprio estilo como fizemos
na criao de Folha de estilos incorporada.
5. Para criar o arquivo externo voc ter que salv-lo com a extenso .css, por
exemplo estilo.css .
Vinculando a folha de estilos
Quando voc estiver editando qualquer outra pgina de seu website e quiser
vincular a Folha de estilo externa criada anteriormente, faa o seguinte:
1. Clique no menu Formatar e ento em Links da folha de estilos...


2. Na caixa de dilogo Vincular folha de estilos clique no boto Adicionar... e
inclua a pgina que voc criou. Voc tambm a opo de vincular este
arquivo a Todas as pginas do seu website. Clique OK.

37

Estilos In-line
Use estilos in-line para aplicar propriedades da folha de estilos em cascata a
elementos individuais em uma pgina. Se uma pgina estiver vinculada a uma folha
de estilos externa, o estilo incorporado ou in-line que voc criar para essa pgina
ampliar ou substituir as propriedades especificadas na folha de estilos externa.
Por exemplo, voc pode especificar que um determinado pargrafo em sua
pgina utiliza alinhamento justificado e espaamento duplo entre linhas. Para isto,
clique com o boto direito do mouse sobre o pargrafo e especifique estas
alteraes, como na figura abaixo:

38

Exemplos de uso de Folhas de Estilo em Cascata
Alterar a cor da barra de rolagem
Barras de rolagem coloridas comearam a aparecer com o lanamento do
Internet Explorer 5.5 permitindo que o navegador tambm contribua para o visual da
pgina. Para mudar as cores da barra de rolagem basta alterar as cores em
hexadecimal, por exemplo #FFCC99, conforme o desejado. Para isto, voc deve
inserir as seguintes linhas na rea <HEAD> do cdigo-fonte da sua pgina:
<STYLE> <!--
BODY {
SCROLLBAR-FACE-COLOR: #FFCC99;
SCROLLBAR-HIGHLIGHT-COLOR: #FF9900;
SCROLLBAR-SHADOW-COLOR: #FF9933;
SCROLLBAR-3DLIGHT-COLOR: #FF9900;
SCROLLBAR-ARROW-COLOR: #FF9900;
SCROLLBAR-TRACK-COLOR: #FFCC66;
SCROLLBAR-DARKSHADOW-COLOR: #000000}
--> </STYLE>


39
Os elementos mais interessantes so scrollbar-face-color que especifica a
cor da barra principal e a scroll-track-color que especifica a cor de fundo da barra.
NOTA
Este recurso s pode ser visualizado no Internet Explorer 5.5 ou mais
recente.
Alterar a forma do cursor
Esse atributo possibilita a mudana da forma do cursor nas pginas quando o
mouse passado sobre o elemento aplicado este estilo.
Atributo Tipo do Cursor
cursor:crosshair; Preciso
cursor:default; Padro do sistema
cursor:text; Seleo ou edio de textos
cursor:hand; Objeto clicvel
cursor:move; Objeto mvel
cursor:wait; Sistema ocupado
cursor:help; Ajuda
cursor:e-resize; Leste
cursor:ne-resize; Norte - Leste
cursor:n-resize; Norte
cursor:nw-resize; Norte - Oeste
cursor:w-resize; Oeste
cursor:sw-resize; Sul - Oeste
cursor:s-resize; Sul
cursor:se-resize; Sul - Leste

Estes atributos podem ser utilizados em tabelas, layers, imagens, em outros
elementos da pgina. Veja no exemplo abaixo como inserir em uma imagem:
<img src="img.gif" style="cursor:help;">
Outros efeitos usando Estilos com DHTML
Efeito de brilho
<div style="height:50; filter:glow(strength=3, color=#000000,enabled=1)">
<h1>Curso de FrontPage 2000</h1>
</div>

40
Formulrio colorido
<style>
select { font-size: smaller; background-color:#ffcc00 ; font-weight: bold; color:
#000080; }
</style>
Efeito de sombra
<div style="height:50; filter:shadow(color=000000,,direction=120,enabled=10)">
<h1>Curso de FrontPage 2000</h1>
</div>
Efeitos em Hiperlinks
Exemplo Descrio
<style>
a:hover{font-size: 16pt;}
</style>
Altera o tamanho da fonte quando o
mouse passa sobre o hiperlink.
<style>
a:hover {font-family:Impact;}
</style>
Altera a fonte quando o mouse passa
sobre o hiperlink.
<style>
a:hover{color:#ffcc00;}
</style>
Altera a cor quando o mouse passa sobre
o hiperlink.
<style>
a {text-decoration:none;}
a:hover {text-decoration:underline;}
</style>
O hiperlink inicialmente sem sublinhado,
altera para sublinhado quando o mouse
passa sobre o hiperlink.
<style>
a:hover{color:white ;background-
color: black; text-decoration: none }
</style>
Altera a cor da fonte para branco, cor de
fundo para preto, e suprime o sublinhado
quando o mouse passa sobre o hiperlink.



41



Questes para
reviso



1. Qual a vantagem de utilizar Folhas de Estilos em sua
pgina da Web?


2. Quais as 3 maneiras de utilizao de Folha de Estilos
em sua pgina da Web?


3. Como voc pode fazer para vincular uma Folha de
Estilo a um outro documento HTML?



Desafio

4. No editor do FrontPage 2000, insira um hiperlink em
um texto e crie um estilo para alterar a cor e a forma
do cursor quando o mouse passar sobre o hiperlink.
Salve o trabalho e teste o resultado em seu
navegador.




42



Resumo do
captulo

Como resultado deste captulo, voc deve ser capaz de:


Compreender o funcionamento das Folhas de Estilos
em Cascata.

Criar folhas de estilo para serem usadas em todo o seu
website.

Criar e alterar o estilo de sua pgina da Web.

Criar estilos prprios para qualquer elemento HTML de
sua pgina da Web.





5
Trabalhando com Banco de
Dados


Neste captulo voc aprender como conectar um website a um
banco de dados para armazenar informaes fornecidas por seus
visitantes ou acessar informaes solicitadas por eles.


Objetivos

Ao completar este captulo voc dever ser capaz de:

1. Compreender o funcionamento bsico da
programao ASP (Active Server Pages).

2. Fazer a integrao de seu website com um banco de
dados Microsoft Access atravs do FrontPage 2000.

3. Ler informaes do banco de dados e mostrar em
uma pgina da Web usando o FrontPage 2000.

4. Gravar informaes no banco de dados a partir de
uma pgina da Web usando o FrontPage 2000.


44
Active Server Pages (ASP)
Antes de iniciarmos a parte de integrao de nossa pgina com Banco de
Dados, vamos compreender o que o Active Server Page ou simplesmente ASP
como conhecido no ambiente de programao da Web.
ASP so pginas da Web que possuem contedo dinmico. Um arquivo ASP
contm texto normal com elementos HTML e/ou comandos em linguagem de
programao script (usualmente VBScript ou Javascript) que sero executados no
servidor. Voc pode usar ASP para criar contedos dinmicos e interativos em seu
website. Os arquivos ASP tm a extenso .asp.
Para usar arquivos ASP em um servidor Web, voc deve instalar um software
que permita que linguagens tipo script sejam usadas na Web, como por exemplo, o
Microsoft Internet Information Server (IIS) for Windows NT Server, o Microsoft Peer
Web Services for Windows NT Workstation e o Microsoft Personal Web Server for
Windows 95 / 98 tm suporte para ASP.
No ambiente do FrontPage, os arquivos ASP devem estar localizados em
uma pasta que permita que scripts e programas sejam executados em seu servidor
da Web.
NOTA
Quando estiver editando um cdigo ASP, voc precisa delimit-lo com os
comandos de inicio e fim (<% e %>).

Isto normalmente chamado "server-side scripting", ou seja, cdigo script que
roda no lado servidor. Existem vrias razes que tornam isto uma boa opo:
Voc no precisa se preocupar com a capacidade do navegador de
interpretar ou no os cdigos scripts corretamente. As pginas so,
portanto, compatveis com qualquer navegador.
Seu cdigo escondido e seguro evitando que outros copiem o que voc
desenvolveu.

45
A carga de processador e de memria desviada do navegador para o
servidor.
As pginas no so vistas diretamente pelo navegador. Ao invs disto, o
servidor l as pginas, executa o cdigo script no lado servidor e formata
uma pgina de resposta gerada dinamicamente para o navegador.
A possibilidade de gerao de pginas dinmicas virtualmente ilimitada.

Por exemplo, podemos criar uma pgina simples usando ASP se voc estiver
usando o Microsoft Personal Web Server (PWS) ou Microsoft Internet Information
Server como seu servidor da Web. Ento, na guia HTML do FrontPage 2000 voc
pode criar a seguinte seqncia de comandos ASP com a linguagem VBScript:
<% For i = 1 to 7 %>
<font size="<% = i %>">
CursoFrontPage 2000<br>
<%Next%>
No esquea de salvar a pgina com a extenso .asp e em uma pasta que
permita que scripts e programas sejam executados em seu servidor da Web.
Para fazer isto no ambiente do FrontPage 2000, faa o seguinte:
1. Na Lista de pastas, clique com o boto direito do mouse sobre a pasta
onde o arquivo foi salvo e ento em Propriedades...

46

2. Na caixa de dilogo Propriedades da pasta, selecione a opo Permitir
que os scripts sejam executados.


Depois de salvar devidamente esta pgina ASP, abra a pgina no navegador
e observe o resultado.
Portanto, neste pequeno exemplo temos tanto cdigos HTML quanto
comandos em VBScript. Os comandos HTML sero executados pelo prprio
navegador na mquina do usurio e os comandos VBScript (entre <% e %>) sero
executados no servidor onde a pgina est hospedada.
Se voc no um programador, acho que o primeiro passo encontrar um
bom livro sobre VBScript. No uma linguagem difcil de aprender e existem muitos
exemplos disponveis sobre o uso de VBScript e ASP.

47
Integrando o FrontPage com banco de dados usando ASP
Usando o FrontPage 2000 voc pode criar um website e conect-lo a um
banco de dados para armazenar informaes fornecidas por seus visitantes ou
buscar informaes solicitadas por eles.
A arquitetura desta integrao composta basicamente por trs elementos
principais: o navegador, o servidor de pginas da Web e o Banco de Dados. O
navegador o software cliente que solicita pginas para um servidor Web. O
servidor Web responsvel pelo gerenciamento e distribuio do contedo que voc
deseja disponibilizar e contm todos arquivos e documentos que podem ser
acessados, inclusive as informaes do banco de dados a serem exibidas aos
usurios. O Banco de Dados uma coleo de informaes relacionadas a um
determinado assunto ou propsito, armazenada sob a forma de tabelas.
Em linhas gerais, com o FrontPage 2000, as informaes podem ser
recuperadas do banco de dados atravs do uso de scripts ASP (que podem tambm
ser gerados automaticamente pelo FrontPage) executados no servidor Web. A
seqncia de passos pode ser assim resumida:

1. Um usurio conecta-se a um Servidor da Web por meio de um navegador;
2. O servidor recebe a requisio de dados e a processa usando ASP;
3. O script ASP faz a conexo ao banco de dados e recupera as informaes
solicitadas;
4. O resultado enviado ao usurio na forma de uma pgina HTML que
exibida no navegador.
Entretanto, voc no precisa ser um programador ASP para criar pginas que
faam uso desta tecnologia. A maneira mais fcil de fazer isso com o FrontPage
2000 utilizando o Assistente de resultados de banco de dados, que pode criar a
conexo com o Banco de Dados e recuperar as informaes, gerando
automaticamente uma pgina ASP como resultado.
Voc poder ainda, atravs do FrontPage, atualizar as informaes de seu

48
banco de dados. Utilizando formulrios e cdigo ASP voc poder acrescentar ou
remover informaes de seu banco de dados.
Gravando informaes em um banco de dados MS Access
Nesta seo vamos ver como ler as informaes digitadas pelo visitante de
nossa pgina da Web e grav-las em um banco de dados Microsoft Access usando
FrontPage 2000 e Active Server Pages (ASP). Lembre-se que antes de poder utilizar
as caractersticas da tecnologia ASP no FrontPage 2000, voc dever instalar os
seguintes componentes:
1. Um dos seguintes servidores:
Microsoft Internet Information Server (IIS) 3.0 ou mais recente.
Microsoft Peer Web Services for Microsoft Windows NT Workstation.
Microsoft Personal Web Server (PWS).
2. O ASP rodando no seu servidor da Web.
3. Extenses de servidor do FrontPage 2000 (FrontPage Server Extensions).
NOTA
Se voc estiver rodando IIS 4.0 ou PWS 4.0, no precisar instalar o
programa ASP.EXE, pois ele j vem pr-instalado com estes produtos.
Ento, para gravar informaes em um banco de dados Microsoft Access
usando o FrontPage 2000, siga os seguintes passos:

1. No Microsoft Access, crie um banco de dados chamado exemplo.mdb,
com uma tabela alunos, e cinco campos denominados:
Codigo (Chave primria; AutoNumerao)
Matricula
Nome
Curso
Email
2. No FrontPage 2000 crie um novo website e denomine ASPWeb.
3. Importe o arquivo exemplo.mdb para dentro do ambiente do FrontPage.
O FrontPage mostrar a seguinte janela para voc criar e digitar o nome
da conexo de banco de dados:

49
4. Entre com o nome da conexo e clique Sim. Automaticamente o
FrontPage cria uma pasta chamada fpdb e coloca o arquivo
exemplo.mdb nesta pasta.
5. Crie uma nova pgina no FrontPage contendo um formulrio e salve o
arquivo com a extenso .asp, como na figura:


6. Agora clique com o boto direito do mouse no formulrio e selecione a
opo Propriedades do formulrio... . Na caixa de dilogo Propriedades
do formulrio, selecione a opo Enviar para banco de dados.

50

7. Clique no boto Opes... e na caixa de dilogo Opes para salvar os
resultados para o banco de dados, a conexo criada no item 4 deve
aparecer no campo Conexo de banco de dados a usar. Em Tabela dos
resultados do formulrio aparecer a tabela alunos criada no item 1.




51
8. A mensagem Nenhum campo de formulrio est mapeado dever
aparecer. Simplesmente clique OK. Esta mensagem para avisar que
voc ter que indicar qual campo do formulrio corresponde a qual campo
no banco de dados. Ento, na guia Campos salvos clique no boto
Modificar... para fazer as devidas correspondncias entre estes campos.



9. Clique OK e salve a pgina com o formulrio com a extenso .asp. Teste
em seu navegador e insira alguns dados no banco de dados.

52
Acessando informaes de um banco de dados MS Access
Nesta seo vamos ver como ler as informaes de um banco de dados
Microsoft Access e mostr-las no navegador. Lembre-se que antes de poder utilizar
as caractersticas da tecnologia ASP no FrontPage 2000, voc dever instalar os
seguintes componentes:
1. Um dos seguintes servidores:
2. Microsoft Internet Information Server (IIS) 3.0 ou mais recente.
3. Microsoft Peer Web Services for Microsoft Windows NT Workstation.
4. Microsoft Personal Web Server (PWS).
5. O ASP rodando no seu servidor da Web.
6. Extenses de servidor do FrontPage 2000 (FrontPage Server Extensions).

NOTA
Se voc estiver rodando IIS 4.0 ou PWS 4.0, no precisar instalar o
programa ASP.EXE, pois ele j vem pr-instalado com estes produtos.

Ento, para acessar as informaes de um banco de dados Microsoft Access
usando o FrontPage 2000 muito fcil e basta seguir 2 passos principais:
1. Crie uma nova pgina no FrontPage. No menu Inserir, Selecione Banco
de Dados e ento Resultados...




53
2. O Assistente de resultados de banco de dados ser ativado como na
figura a seguir:


Uma vez acionado este assistente, ele ir auxili-lo na criao de uma pgina
de resultados, onde as informaes existentes no banco de dados sero exibidas
em sua pgina da Web. Na Etapa 1 deste assistente, voc poder utilizar a conexo
de banco de dados criada anteriormente (neste exemplo, Banco_de_dados_1). Na
Etapa 2 voc poder especificar qual a fonte de registro, ou seja, qual tabela dever
ser acessada (neste exemplo, alunos). Na Etapa 3 voc poder selecionar os
campos do banco de dados que voc quer que sejam exibidos e poder tambm
especificar critrios especficos para busca de registros. Na Etapa 4 voc poder
escolher o formato de exibio das informaes. E, na Etapa 5, voc poder
informar quantos registros devero ser exibidos por vez. Salve sua pgina com a
extenso .asp e teste em seu navegador.

54



Questes para
reviso



1. Para que serve a linguagem ASP? E a linguagem
VBScript?

2. No FrontPage 2000, qual a maneira mais fcil de fazer
a conexo com um banco de dados?

3. O FrontPage 2000 consegue criar um banco de dados
a partir de um formulrio? Faa este teste criando um
formulrio com alguns campos e, usando o assistente,
deixe a criao do banco de dados por conta do
FrontPage 2000.

Desafio

4. Criar um livro de visitas em seu website. Primeiro crie
um banco de dados Access para armazenar as
informaes dos visitantes. Depois crie uma pgina
em seu website contendo um formulrio com os dados
a serem preenchidos pelo visitante. Faa a conexo
com o banco de dados usando o assistente do
FrontPage 2000. Salve a pgina com a extenso .asp
e teste o resultado em seu navegador.




55



Resumo do
captulo

Como resultado deste captulo, voc deve ser capaz de:

Compreender o funcionamento bsico da programao
ASP (Active Server Pages).

Fazer a conexo de um banco de dados Microsoft
Access com o seu website.

Ler informaes do banco de dados e mostrar em uma
pgina da Web usando o FrontPage 2000.

Gravar informaes no banco de dados a partir de uma
pgina da Web usando o FrontPage 2000.





56
Referncias Bibliogrficas

MICROSOFT CORPORATION, "Guia de Introduo ao Microsoft FrontPage 2000 -
Sites profissionais sem programao", documento n X04-71206, USA, 1998.
EVANS, T., HTML - Simples e Rpido, Makron Books, 1996.
VENETIANER, T., HTML - Desmistificando a Linguagem da Internet, Makron
Books, 1996.
SHAFRAN, A., Microsoft FrontPage 98 Aprenda em 24 horas, Editora Campus,
1998.