Apostila - FrontPage 2000

FRONTPAGE 2000

Rua dos Otoni, 881/9 andar - Funcionrios PABX/FAX : (31) 273-2822

CEP 30150-270 - Belo Horizonte - MG

Todos direitos reservados. Proibida a reproduo, mesmo parcial, por qualquer processo mecnico, eletrnico, reprogrfico, etc., sem a autorizao, por escrito, do(s) autor(es) e da editora.

Rua dos Otoni, 881 - 9 Andar Belo Horizonte - MG - 30150-270 www.zargon.com.br (031) 273-2822

FRONTPAGE 2000

SUMRIO Introduo ....................................................................................................................................... 1

A Linguagem Html E O Frontpage......................................................................................................1 Alguns Conceitos: ...........................................................................................................................1

Conhecendo O Frontpage 2000 ........................................................................................................ 2

Modos De Visualizao ....................................................................................................................3 Pgina .......................................................................................................................................3 Pastas........................................................................................................................................3 Relatrios ...................................................................................................................................3 Navegao..................................................................................................................................3 Hyperlinks ..................................................................................................................................3 Tarefas ......................................................................................................................................3

Criando Um Site ............................................................................................................................... 4

Criando Uma Web...........................................................................................................................4 Inserindo Uma Nova Pgina .............................................................................................................5 Importando Uma Pgina Ou Uma Pasta..............................................................................................6 Importando Uma Web .....................................................................................................................7 Modos De Visualizar A Pgina ...........................................................................................................9

Formatando As Pginas Do Site ....................................................................................................... 9

Formatando Fonte...........................................................................................................................9 Formatando Pargrafos..................................................................................................................12

Alinhamento .............................................................................................................................12 Recuos.....................................................................................................................................12 Espaamentos ...........................................................................................................................13

Aplicando Efeitos De Animao Ao Texto ..........................................................................................13 Propriedades Da Pgina .................................................................................................................14

Mudando O Plano De Fundo.........................................................................................................15 Definindo Uma Figura Como Plano De Fundo...............................................................................15 Para Definir Uma Cor Como Plano De Fundo: ..............................................................................16

Definindo A Cor Padro Do Texto .................................................................................................16 Definindo O Ttulo Da Pgina .......................................................................................................17 Definindo Cores De Hyperlinks.....................................................................................................17

Inserindo Linhas Horizontais...........................................................................................................17 Personalizando Uma Linha Horizontal............................................................................................17

Marcadores E Numerao...............................................................................................................18 Para Inserir Marcadores ..............................................................................................................18

Para Usar Uma Imagem Como Marcador ....................................................................................19 Para Inserir Numeradores ...........................................................................................................20

Bordas E Sombreamento ...............................................................................................................21 Aplicando Borda ........................................................................................................................21 Aplicando Sombreamento ...........................................................................................................22

Transio De Pgina......................................................................................................................22

Trabalhando Com Imagens ............................................................................................................ 23

Clip-Art .......................................................................................................................................24 Inserindo Um Clipart ..................................................................................................................24

Inserindo Imagens De Arquivos ......................................................................................................25 Vdeo ..........................................................................................................................................26 Mapa De Imagens.........................................................................................................................28

Transformando As Imagens Em Um Mapa De Imagem: ...................................................................28 Criando Um Vnculo Padro .........................................................................................................30

Rua dos Otoni, 881 - 9 Andar Belo Horizonte - MG - 30150-270 www.zargon.com.br (031) 273-2822

FRONTPAGE 2000

Temas ............................................................................................................................................ 31

Personalizando Os Temas...............................................................................................................32 Alterando As Cores ....................................................................................................................32 Alterando Os Elementos Grficos..................................................................................................34 Alterando O Formato Do Texto.....................................................................................................35 Salvando O Tema ......................................................................................................................36

Trabalhando Com Componentes..................................................................................................... 36

Letreiro Digital .............................................................................................................................37 Inserindo Um Letreiro Digital .......................................................................................................37

Gerenciador De Anncios Em Faixa..................................................................................................38 Inserindo Um Gerenciador De Anncios Em Faixa ...........................................................................38

Boto Em Foco .............................................................................................................................39 Inserindo Um Boto Em Foco.......................................................................................................39

Pgina De Incluso .......................................................................................................................40 Figura Ou Pgina De Incluso Programada .......................................................................................41

Hyperlink ....................................................................................................................................... 42

Para Um Endereo Na Www............................................................................................................43 Para E-Mail ..................................................................................................................................43 Para Outra Pgina.........................................................................................................................43 Para Outro Ponto Na Mesma Pgina.................................................................................................43

Tabela ............................................................................................................................................ 44

Modificando Atributos Da Tabela .....................................................................................................45 Modificando Atributos Da Clula......................................................................................................46 Incluindo Linhas E Colunas.............................................................................................................47 Removendo Linhas E Colunas .........................................................................................................47 Mesclando E Dividindo Clulas ........................................................................................................47

Quadros ......................................................................................................................................... 48

Criando Pginas Com Quadros ........................................................................................................48 Configurando Cada Quadro ............................................................................................................49

Salvando Quadros......................................................................................................................50 Configurando Propriedades Dos Quadros .......................................................................................51 Desativando As Bordas Dos Quadros E Controlando Os Espaos Entre Os Quadros...............................52

Criando Vnculos Entre Quadros ......................................................................................................52 Dividindo E Excluindo Quadros........................................................................................................53

Formulrio ..................................................................................................................................... 54

Inserindo Campos De Formulrio ....................................................................................................54 Caixa De Texto..........................................................................................................................54 Caixa De Seleo.......................................................................................................................55 Boto De Opo ........................................................................................................................56 Menu Suspenso .........................................................................................................................57 Caixa De Texto De Rolagem ........................................................................................................58 Botes De Ao .........................................................................................................................58

Transmitindo E Processando O Formulrio ........................................................................................59

Barra De Navegao....................................................................................................................... 60

Relatrios Para Acompanhamento ................................................................................................. 64

Publicando A Pgina....................................................................................................................... 66

Provedores De Presena De Sites Da Web Do Frontpage.....................................................................66 Fazendo Upload Pela Primeira Vez ...................................................................................................67 Tentativas De Publicao Posteriores ...............................................................................................68

CONCLUSO ..........................................................................................................................................................................69

Rua dos Otoni, 881 - 9 Andar Pg.: 1 Belo Horizonte - MG - 30150-270 www.zargon.com.br (031) 273-2822

FRONTPAGE 2000

INTRODUO A WWW (World Wide Web), existe h apenas alguns anos, e tem revolucionado o modo de

comunicao entre as pessoas. Alm de enviar mensagens de correio eletrnico pelo mundo, qualquer um pode criar suas prprias informaes personalizadas e disponibiliz-las atravs de uma Pgina Web a qualquer pessoa que possua um navegador da Web.

As pginas da Web existem deste 1991, quando a WWW foi inventada. Naquele tempo, um grupo de pessoas colaborou para a criao de vrios padres que permitiram que os computadores de todo o mundo falassem uns com os outros eletronicamente. Um dos mais importantes padres criados por eles foi a HTML, linguagem de marcao que est por trs de cada pgina da Web.

O FrontPage uma ferramenta de criao, gerenciamento e publicao de sites da Web. Tudo isto feito de forma interativa, sem precisar necessariamente, de saber utilizar e programar em HTML.

A LINGUAGEM HTML E O FRONTPAGE

A Linguagem HTML composta por uma grande quantidade de cdigos, denominados tags, que so inseridos em um arquivo de texto comum. Cada uma dessas tags possui um propsito especfico e usada para marcar como determinadas informaes devem aparecer em um navegador. Para criar arquivos HTML, necessrio um editor de texto simples, como por exemplo, o Bloco de Notas do Windows. Na verdade, o nico modo pelo qual voc pode distinguir arquivos HTML de arquivos de texto sem olhar dentro deles examinar suas extenses de arquivos geralmente .HTM ou .HTML em lugar de .TXT ou .Doc.

Como voc pode imaginar, aprender a construir sites da Web com este tipo simples de ferramenta para o tratamento HTML requer tempo e esforo.

Desde ento, foram criados vrios programas que auxiliam na criao de sites da Web, e o FrontPage um deles. Ao usar o FrontPage, ele toma conta de todo trabalho difcil para voc, pois, nos bastidores, ele se encarrega de gerar todo o cdigo HTML necessrio. Portanto, quando voc salva uma determinada pgina da Web gerada no FrontPage, na verdade, est criando um arquivo de texto em HTML. Depois disto voc utiliza o seu navegador favorito para ler essa HTML e interpretar cada tag. O FrontPage permite que voc penetre na parte oculta e edite a HTML diretamente, mas, a maioria das vezes, voc usar a interface grfica do FrontPage.

ALGUNS CONCEITOS:

HTML: significa Hypertext Markup Language, ou Linguagem de Marcao de Hipertexto. a linguagem de marcao que est por trs de cada pgina da Web, controla o modo exato pelo qual o texto e os grficos (figuras) so apresentados atravs de um navegador.

Navegador ou Browser: o programa que todos precisam ter em seu computador para explorar a Internet. o navegador que l arquivos HTML, comunica com um dos milhares de servidores que compem a WWW e recebe de volta, do servidor, o arquivo HTML que dever ser exibido na tela em forma de textos e figuras. um interpretador de HTML que l os cdigos contidos no arquivo e decide como exibi-los.

Web: uma rede global composta por milhares de computadores diferentes que constantemente conversam uns com os outros. Cada computador da WWW chamado de servidor da Web e contm vrios arquivos HTML.

Pgina da Web: o arquivo contendo comandos HTML.

Site: um conjunto de pginas HTML relacionadas entre si.

Site da Web do FrontPage: para o FrontPage, um grupo de pginas da Web relacionadas entre si geralmente chamado de site da Web sempre chamado de Site da Web do


FRONTPAGE 2000

FrontPage. Ela diferente da World Wide Web (WWW) que geralmente citada na frase navegar pela Web. Tal Web o conjunto de computadores interligados pelo mundo inteiro que enviam pginas HTML para todos os lados medida que estas so solicitadas por usurios (conforme conceito visto anteriormente).

Java: uma linguagem popular que os programadores utilizam para criar programas interativos, denominados applets, que so executados diretamente dentro de uma pgina da Web. Ela est otimizada para funcionar especificamente na WWW e funciona exatamente do mesmo modo em todos os tipos de computadores, dentre os quais os Macs, os Pcs e as mquinas UNIX.

CGI: (Common Gateway Interface) uma linguagem de programao, que possibilita que pginas da Web se comuniquem e compartilhem informaes com o servidor no qual residem atravs de banco de dados.

Pixel: uma unidade de medida para monitores de computador que se refere ao nmero de pontos que compe a tela. Um monitor VGA tem 640 pixels de largura por 480 pixels de altura. Cada pixel corresponde a um dos pontos da tela do seu computador que compem toda a imagem.

CONHECENDO O FRONTPAGE 2000

Barra de Ttulo Barra de Ferramentas Padro

Barra de Formatao

Barrade

Modos

Barra de Status Guias de visualizao da pgina


FRONTPAGE 2000

MODOS DE VISUALIZAO

PGINA

O modo de visualizao Pgina ser utilizado para fazer a edio das pginas que faro parte do site que est sendo criado.

PASTAS

O modo de visualizao Pastas mostra de que modo o site organizado. Todos os arquivos HTML e imagens so exibidos e podem ser organizados em vrias subpastas, como por exemplo a subpasta Images onde so armazenados todos os grficos (figuras) utilizados na sua Web.

RELATRIOS

O modo de visualizao Relatrios ser utilizado para voc gerenciar a web que estiver trabalhando. Poder ser visualizado um resumo do site, os arquivos lentos, os desatualizados, etc.

NAVEGAO

O modo de visualizao Navegao usado para construo de barras de navegao automatizadas entre pginas da Web. Ou, pode tambm ser utilizado simplesmente para montagem de um organograma do site, facilitando o controle e navegao entre os arquivos que voc criou. (O assunto Barras de Navegao ser abordado mais adiante nesta apostila).

HYPERLINKS

Este modo de visualizao oferece uma representao grfica de como cada arquivo do seu site est vinculado a outro. Por meio de um sistema hierrquico, o FrontPage desenha linhas entre os arquivos vinculados. Mostrando a organizao dos links, assim voc consegue identificar se os links criados esto bem distribudos ou confusos.

TAREFAS

O ltimo modo de visualizao apresenta uma lista de tarefas que voc marcou para serem concludas. Ao longo do processo de construo do site, voc pode freqentemente tomar nota de tarefas que devem ser concludas antes que o site esteja terminado. Estas tarefas podem ser lidas e concludas uma por vez.


FRONTPAGE 2000

CRIANDO UM SITE

CRIANDO UMA WEB

Uma Web o grupo de arquivos relacionados disponibilizados em um servidor Web na Internet. O FrontPage trabalha com webs para facilitar a organizao dos arquivos da mesma. Existem vrios modelos e assistentes que o auxiliaro na criao da sua web ou site.

mais aconselhvel utilizar webs para construo de sites do que pginas soltas. Alm do controle dos arquivos serem facilitados, vrios recursos do FrontPage sero mais explorados se utilizados em uma web.

Para criar uma web:

1. Clique no menu Arquivo / Novo / Web ou na seta direita do boto Nova Pgina na barra de ferramentas Padro e selecione a opo Web, conforme a figura a seguir mostra.

2. Ser exibida a janela para escolha do modelo ou assistente para criao da Web.


FRONTPAGE 2000

3. Primeiro selecione o tipo de web que ser criada. Depois na caixa Especifique o local da nova web defina em qual pasta do winchester o seu site ser armazenado. Este caminho dever ser digitado.

4. Depois clique em OK.

5. Voc visualizar a tela no modo de exibio Pgina que utilizado para edio das pginas do site. Do lado esquerdo est sendo visualizado a lista de pastas da web que pode ser ocultada.

6. Se desejar ocultar a lista de pastas clique no boto Lista de pastas na barra de ferramentas Padro. Para exibi-la, clique novamente no boto Lista de pastas.

INSERINDO UMA NOVA PGINA

Para inserir uma nova pgina no site:

1. Clique no boto Nova Pgina , na Barra de Ferramentas Padro.

2. Uma nova pgina aparecer do lado direito da tela com o nome nova pgina1.

Se voc precisar escolher um modelo para a pgina nova:

1. Clique no menu Arquivo / Novo, escolha um dos modelos e clique em OK.

Lista dePastas


FRONTPAGE 2000

Est janela s aberta quando utilizamos o menu Arquivo / Novo, quando clicamos no boto Nova pgina na Barra de Ferramentas Padro inserida uma pgina em branco automaticamente.

IMPORTANDO UMA PGINA OU UMA PASTA

Todos os arquivos HTML de um site precisam ficar na mesma Web. Por isto, se voc tem um arquivo HTML que est gravado em outra pasta que no seja a sua Web, ser necessrio import-lo para dentro do site.

Para importar uma pgina HTML para uma Web existente:

1. Abra a web que ir receber o arquivo.

2. Clique no menu Arquivo / Importar, e defina se ser feita acrescentada uma pgina (Adicionar arquivo) ou se ser acrescentada uma pasta do winchester (Adicionar pasta) ou se ser importado um site da Internet (Da Web) clicando no boto correspondente esquerda da tela.


FRONTPAGE 2000

3. Clique sobre o arquivo ou pasta desejado de acordo com o local que se encontra gravado.

4. Clique no boto OK e seu arquivo j far parte da Web.

IMPORTANDO UMA WEB

O FrontPage permite importar a Web da Internet, ou seja, um endereo WWW qualquer.

Para importar uma Web, no FrontPage, clique no menu Arquivo / Novo / Web.

1. Na janela que ser aberta selecione o Assistente para Importao de Web, defina em qual pasta ser criada a nova Web e clique no boto OK.


FRONTPAGE 2000

2. A primeira opo: De um diretrio de origem de arquivos em um computador local ou rede, possibilita especificar uma pasta a ser importada como Web.

Para determinar qual pasta, clique no boto Procurar.

Clique sobre a pasta escolhida.

Aps clicar OK, se nesta pasta voc criou subpastas, habilite a opo Incluir subpastas.

Clique no boto Avanar.

Ser exibida uma lista com todos os arquivos da pasta que voc selecionou. Se quiser excluir algum arquivo que foi selecionado, clique sobre o nome do mesmo e clique no boto Excluir. Depois clique no boto Avanar.

Agora clique no boto Concluir e sua Web importada j estar na tela.

3. A segunda opo: De um site da World Wide Web, permite importar as pginas de um site que j faz parte da WWW. Para isto, aps habilitar esta opo:


FRONTPAGE 2000

Na caixa Local, digite o endereo WWW do site desejado.

Clique no boto Avanar.

Especifique as opes de limite de espao que a Web ocupar do seu disco, clique Avanar e Concluir.

Os arquivos da Web especificada j foram importados para o seu disco. Agora podero ser alterados e personalizados por voc.

MODOS DE VISUALIZAR A PGINA

No FrontPage voc tem trs maneiras diferentes de visualizar a pgina que est construindo. O modo Normal, HTML e o Visualizao. Para selecionar qualquer um deles utilize as guias na parte inferior da tela, conforme a figura a seguir:

O modo Normal utilizado para a criao da pgina. O modo HTML o utilizado para visualizar e alterar o cdigo HTML que foi gerado pelo FrontPage. O modo Visualizao utilizado para visualizar a pgina como se estivesse em um navegador.


FRONTPAGE 2000

FORMATANDO AS PGINAS DO SITE Voc que est acostumado com o uso do Microsoft Word perceber que a maioria dos

recursos de formatao de texto e pargrafos do Frontpage so herdadas do Microsoft Word, facilitando o uso do software.

FORMATANDO FONTE

Os formatos que podemos alterar de uma fonte so: tipo de fonte, estilo (negrito, itlico), cor, efeitos. Para isto, clique no menu Formatar / Fonte.

Escolha qual a fonte, o estilo e o tamanho de fontes desejados. Voc poder alterar a cor da fonte. Ao clicar na caixa Cor notar que so mostradas as cores padres, as cores que se encontram no documento e a opo Mais cores que utilizaremos para criar uma cor diferente das existentes.

Clique na opo Mais cores, ser mostrada a janela a seguir:


FRONTPAGE 2000

Clique em uma das cores para selecion-la, mas se a cor que voc est precisando no est sendo visualizada nesta tela poderemos cri-la ou selecion-la de um objeto que est na pgina.

Para criar um nova cor, clique no boto Personalizar, a janela a seguir ser mostrada:

Primeiro clique na cor que ser a principal, depois mova o Controle de luminosidade da cor at que a caixa Cor Slido mostre a cor no tom desejado. Seguindo estes passos voc est criando um cor personalizada, para grav-la clique no boto Adicionar s cores personalizadas.

Para utilizar a cor que acabou de ser criada clique no boto OK, novamente em OK e no boto OK da janela Formatar Fonte.

Cor principal

Controle de Luminosidade


FRONTPAGE 2000

FORMATANDO PARGRAFOS

Alinhamento, recuos e espaamentos so maneiras de controlar a aparncia do pargrafo. Veja abaixo como isto pode ser feito.

ALINHAMENTO

No FrontPage h quatro tipos de alinhamento: Centralizado, Esquerdo, Direito e Justificado.

Os comandos para alinhamento se encontram no menu Formatar / Pargrafo, ou nos cones: na barra de Formatao, mas podemos notar que o cone Justificar no est na barra de Formatao. Para justificar um pargrafo utilize o menu Formatar / Pargrafo.

RECUOS

Para o FrontPage, o recuo pode ser aplicado pelos cones Aumentar recuo , ou

Diminuir recuo .

Quando estes cones so utilizados, o recuo aplicado esquerda e direita simultaneamente na mesma proporo.

Para controlar recuo somente esquerda, ou somente direita, ou somente primeira linha:

1. Selecione o pargrafo e clique no menu Formatar / Pargrafo.


FRONTPAGE 2000

2. No grupo Recuos escolha a quantidade de pixels que ser utilizada Antes do texto, ou seja, esquerda do texto. Se desejar poder acrescentar recuo Depois do texto, ou seja, direita do texto.

3. Outro recuo que poder ser utilizado o Recuar primeira linha.

4. Clique em Ok e visualize a aparncia do pargrafo.

ESPAAMENTOS

Os espaamentos podem ser utilizados para determinar o espao entre um pargrafo e outro, o espao aplicado entre as palavras do pargrafo e entre as linhas de um pargrafo.

Para alterar o espaamento dos pargrafos:

1. Clique no menu Formatar / Pargrafo.

2. No grupo Espaamento defina a medida em pixels dos espaamentos Antes, Depois, Palavra e Espaamento de linhas.

Lembre-se de utilizar um Espaamento de linha da mesma altura da fonte ou maior, para que as linhas do pargrafo no fiquem sobrepostas.

APLICANDO EFEITOS DE ANIMAO AO TEXTO

Para animar um texto usando o FrontPage ser necessrio utilizar efeitos de HTML Dinmico. Mas no precisaremos programar em HTML o prprio FrontPage traz vrios efeitos que podem ser aplicados ao texto em vrios eventos diferentes como ao carregar a pgina, ou executar o efeito se o usurio passar o mouse sobre o texto, etc.


FRONTPAGE 2000

Para aplicar um efeito ao texto, selecione o texto que gostaria de aplicar o efeito.

1. Clique no menu Formatar / Efeitos de HTML dinmico. Ser mostrada a seguinte barra de ferramentas:

2. Primeiro escolha o evento, ou quando acontecer o efeito. Para texto o ideal o evento Carregar pgina. Assim que marcar qual o evento voc poder escolher o Efeito.

3. Na caixa Aplicar escolha um dos efeitos.

4. Ao escolher o efeito o texto ser destacado com um quadro, mostrando que ali existe um efeito de HTML dinmico. Se quiser retirar este destaque do texto, clique no

boto Realar os efeitos de HTML dinmico.

5. Para testar o efeito aplicado, visualize a pgina. Voc pode visualizar utilizando a guia Visualizao ou visualizar a pgina que est criando no navegador, basta clicar

no boto Visualizar no navegador que o mais aconselhvel.

Lembre-se de Salvar o arquivo antes de visualiz-lo.

Para modificar o efeito, clique na caixa Aplicar da barra de ferramentas Efeitos de HTML dinmico e escolha outro efeito.

Para remover o efeito de um texto, selecione o texto e clique no boto Remover efeito na barra de ferramentas Efeitos de HTML dinmico.

PROPRIEDADES DA PGINA

Acessamos as propriedades da pgina para alterar o plano de fundo, para definir ttulo para pgina, alterar margens, determinar cor dos links visitados e ativos, entre outros. Para acessar as propriedades da pgina, clique com o boto direito do mouse sobre qualquer ponto da pgina e clique na opo Propriedades da pgina ou clique no menu Arquivo / Propriedades.

Veja a seguir de forma mais detalhada, como modificar as propriedades da pgina.


FRONTPAGE 2000

MUDANDO O PLANO DE FUNDO

Plano de fundo o nome dado ao fundo de pgina e pode ser uma figura (GIF ou JPG) ou simplesmente uma cor. H duas formas para escolher um plano de fundo, uma delas clicar no menu Formatar / Plano de fundo. Outra acessar as propriedades da pgina clicando com o boto direito do mouse em qualquer ponto da tela e selecionando a opo Propriedades da pgina.

Clique na guia Plano de fundo.


FRONTPAGE 2000

DEFININDO UMA FIGURA COMO PLANO DE FUNDO

1. Habilite a opo Figura de plano de fundo e clique no boto Procurar.

2. Voc poder escolher uma figura que j faz parte da sua Web clicando sobre o nome da mesma na lista de arquivos que aparece (normalmente as figuras ficam armazenada na pasta Images) ou escolher uma das outras duas opes indicadas na figura acima.

3. Aps escolher a figura, clique em OK.

4. A opo Marca dgua quando habilitada, fixa a figura que est como Plano de fundo da pgina de forma que ao usar a barra de rolagem, seu texto deslocar pela tela, porm a figura permanecer na mesma posio.

5. Clique OK novamente e veja na tela como ficou a pgina.

PARA DEFINIR UMA COR COMO PLANO DE FUNDO:

1. Acesse as propriedades da pgina conforme descrito no item anterior.

2. Clique na guia Plano de fundo. Na caixa Plano de fundo estar uma cor padro, escolha uma outra cor e clique em OK.

DEFININDO A COR PADRO DO TEXTO

Tambm podemos escolher qual a cor padro para o texto da pgina que estamos criando. Acesse as propriedades da pgina, de uma das formas j citadas.

Na caixa Texto escolha uma cor para ser definida como a cor padro para os textos da pgina, clique em OK.

Clique neste boto para selecionar uma imagem armazenada no winchester

Clique neste boto para selecionar uma imagem do Clip-art.


FRONTPAGE 2000

DEFININDO O TTULO DA PGINA

Em um navegador, o ttulo da pagina aparece na barra de ttulo, ou seja, na parte mais alta da tela. Este ttulo serve para identificar a Home Page, ajudando o visitante a reconhecer a pgina que esta navegando.

Para definir o ttulo da pgina, siga os seguintes passos:

1. Clique com o boto direito do mouse em qualquer ponto da pgina. Selecione a opo Propriedades da pgina.

2. Verifique se a guia Geral est selecionada. Na caixa Ttulo, digite o ttulo desejado e clique em OK.

DEFININDO CORES DE HYPERLINKS

Trs cores podem ser definidas para um hyperlink:

Hyperlink: a cor que aparecer na tela em todos os hyperlinks que ainda no foram visitados.

Hyperlink Visitado: a cor que aparecer na tela em todos os hyperlinks que j foram visitados.

Hyperlink Ativo: a cor que aparecer na tela para o hyperlink que estiver selecionado.

Para definir estas cores, acesse as propriedades da pgina conforme descrito acima e na guia Plano de fundo, escolha as cores desejadas.

INSERINDO LINHAS HORIZONTAIS

Voc pode inserir vrios tipos de linhas horizontais na pgina com o objetivo de organizar, separar e melhorar o visual. Muito usada para criar uma separao lgica entre informaes distintas.

A linha horizontal padro uma linha fina que percorre toda a largura da janela do navegador e pode ter algumas propriedades alteradas, como: comprimento, cor, alinhamento e altura.

Veja agora como inserir e como alterar estas propriedades.

Clique no menu Inserir / Linha horizontal. Aparecer uma linha em baixo relevo percorrendo a largura da tela toda.

PERSONALIZANDO UMA LINHA HORIZONTAL

D clique duplo sobre a linha ou clique com o boto direito do mouse sobre a linha que deseja alterar e em seguida clique na opo Propriedades da linha horizontal.


FRONTPAGE 2000

Opes de configurao:

Largura: define a largura da linha em relao largura da pgina. Pode ser definida em pixels (pontos da tela) ou em percentagem. O padro ao inserir uma linha que sua largura seja de 100% da largura da pgina.

Altura: define a altura da linha, ou como chamamos mais comumente, a espessura da linha. Este valor dado em pixels. Na prtica so utilizados valores entre 2 e 15.

Alinhamento: alinha a linha em relao s bordas da pgina.

Cor: define a cor da linha. Alm das 16 opes de cores apresentadas, a opo Mais cores permite que voc personalize uma outra cor. Esta opo quando utilizada automaticamente transforma a linha em baixo relevo em uma linha slida.

Linha slida: quando habilitado, transforma a linha em uma linha slida.

Altere as propriedades desejadas e clique em OK.

Ate se sentir familiarizado com estas propriedades, voc dever fazer testes e experimentar diversas configuraes ate achar aquela que mais te agrada.

MARCADORES E NUMERAO

So usados frequentemente para incluir itens de informao inter-relacionados em uma pgina da Web. O FrontPage trabalha com marcadores e numerao de forma similar ao Microsoft Word para endentar e agrupar informaes que devam ser exibidas em conjunto.

Quando se usam marcadores e/ou numerao as informaes ficam em um formato bem organizado e fcil de ser lido.

PARA INSERIR MARCADORES

1. Digite os pargrafos que recebero os marcadores e deixe-os selecionados.

2. Clique no menu Formatar / Marcadores e numerao ou no boto Marcadores na barra de Formatao.


FRONTPAGE 2000

3. Clique na guia Marcadores simples, escolha um modelo e clique em OK.

PARA USAR UMA IMAGEM COMO MARCADOR

1. Selecione os pargrafos que recebero os marcadores.

2. Clique no menu Formatar / Marcadores e numerao.

3. Clique na guia Marcadores de figura.


FRONTPAGE 2000

Se voc estiver usando um Tema poder usar a imagem sugerida pelo tema corrente, bastando apenas marcar a opo Usar figuras do tema atual e clicar em Ok.

4. Se quiser escolher uma figura como marcador, clique Especificar uma imagem e depois clique no boto Procurar.

5. D dois cliques na pasta onde se encontra a figura e d dois cliques sobre o nome da figura.

6. Clique em OK.

PARA INSERIR NUMERADORES

1. Digite os pargrafos que recebero os marcadores e deixe-os selecionados.

2. Clique no menu Formatar / Marcadores e numerao ou no boto Numerao na barra de Formatao.

3. Clique na guia Nmeros, escolha um modelo e clique em OK.

Se desejar que a numerao comece a partir de um valor determinado, digite este valor na caixa Iniciar em.


FRONTPAGE 2000

BORDAS E SOMBREAMENTO

Para destacar parte do contedo de uma pgina podero ser utilizados Bordas e Sombreamento. Este efeito o mesmo utilizado no Microsoft Word.

APLICANDO BORDA

Para aplicar borda em uma parte do texto, selecione-o. Clique no menu Formatar / Bordas e sombreamento e selecione a guia Bordas.

1. Escolha qual o tipo de borda ser utilizado. Na grupo Definio escolha Caixa ou Personalizada.

A opo Caixa cria a borda utilizando o mesmo estilo de linha em toda a borda.

A opo Personalizada voc poder escolher um estilo de linha diferente para cada uma das bordas e at mesmo deixar de criar uma das bordas.

* Ao utilizar a opo Personalizada utilize os botes de Borda superior, Borda inferior, Borda esquerda e Borda direita para definir onde as bordas sero aplicadas.

2. Agora precisamos definir qual o Estilo de linha utilizar na borda. Clique sobre um dos estilos.

3. Depois escolha uma Cor e uma Largura para a linha.

4. Se precisar especificar qual a distncia da borda ao texto que estar dentro dela utilize o grupo Enchimento e defina em pixels a distncia.


FRONTPAGE 2000

APLICANDO SOMBREAMENTO

Para aplicar sombreamento em um texto, clique no menu Formatar / Bordas e sombreamento e clique na guia Sombreamento.

1. Na caixa Cor do plano de fundo escolha a cor para o fundo da caixa.

2. Na caixa Cor do primeiro plano escolha a cor para o texto da caixa.

3. Voc pode colocar um imagem como plano de fundo. Clique no boto Procurar e escolha uma imagem que estiver armazenada no winchester ou do clip-art e clique em OK.

Voc pode determinar a Posio vertical e a Posio horizontal da imagem. Alm disso, poder determinar se a imagem ser repetida (Repetir) e se ao mover a barra de rolagem a figura ser fixa ou se rolar juntamente com o texto.

OBSERVAO

Para retirar as formataes do pargrafo, selecione-o, clique no menu Formatar / Remover formatao.

TRANSIO DE PGINA

So efeitos que podem ser aplicados quando o usurio seleciona o link para entrar em uma pgina e a pgina carregada executando um efeito visual. Usurios de PowerPoint esto acostumados com esta transio. Para aplicar uma transio em uma pgina:

1. Abra o arquivo que deseja aplicar o efeito. Clique no menu Formatar / Transio de pgina.


FRONTPAGE 2000

2. Selecione quando o efeito ser aplicado na caixa Evento.

3. Determine a Durao do efeito em segundos.

4. Escolha um Efeito de transio e clique em OK.

OBSERVAO

Estes efeitos devem ser utilizados com critrio, pois torna abertura da pgina mais lenta.

TRABALHANDO COM IMAGENS Imagens, ou grficos, podem ser fotografias, cones, botes e outros elementos. Em geral,

todos os grficos existentes na Web encontram-se em um dos dois formatos famosos: GIF e JPEG.

GIF a abreviatura de Graphical Interchange Format e esse formato foi originalmente desenvolvido para constituir um eficiente e flexvel meio para as pessoas de todo o mundo enviarem grficos de computador umas s outras. Transformaram-se no primeiro tipo de arquivos grficos a encontrar suporte na WWW. As imagens GIF aceitam o uso de somente 256 cores. Esta limitao ajuda a manter baixo o tamanho dos arquivos que contenham pequenos grficos, mas no funcionam muito bem com grandes imagens e, em particular, com fotografias.

O formato JPEG, ou Joint Photographic Expert Group, foi projetado especificamente para fotografias e imagens com milhes de cores. O formato JPEG provou ser significativamente mais eficiente quanto compactao eletrnica de grandes fotografias e atualmente encontra suporte em praticamente todos os navegadores grficos da Web. Geralmente, as imagens JPEG lidam com cores e detalhes de imagens melhor que as imagens GIF.

Normalmente, o formato GIF empregado em cones, botes, barras e fundos. Os arquivos JPEG so usados mais frequentemente em fotografias, logotipos complexos e mapas. O FrontPage lida sem problemas com ambos.

Como nem todas as imagens que voc desejar usar vm num desses formatos reconhecveis, o FrontPage possui um conjunto prprio de filtros que automaticamente convertem imagens de todos os tipos para o padro GIF ou JPEG. As imagens sero salvas no padro GIF se usarem apenas 256 cores diferentes e sero salvas no padro JPEG se usarem mais cores. O FrontPage converte automaticamente TIFF, PCX, BMP e vrios outros formatos sempre que voc usar um deles na pgina Web.


FRONTPAGE 2000

CLIP-ART

O FrontPage vem com uma grande quantidade de imagens que voc pode usar na pgina da Web. H aproximadamente 400 cones, barras, botes e marcadores que podem ser inseridos ou personalizados para a sua pgina da Web. Alm disto, se voc possui o Microsoft Office 95 ou 97ou 2000, voc ter o clip-art deste Office tambm sua disposio.

INSERINDO UM CLIPART

1. Clique no menu Inserir / Figura / Clip-art.

2. As figuras so exibidas por Categorias. Clique sobre o nome da categoria, observe as figuras e clique sobre a figura escolhida.

3. Ser mostrado um pequeno menu onde voc poder escolher entre quatro opes.

4. Para inserir uma imagem clique no boto Inserir clipe.

Inserir Clipe

Visualizar Clipe

Acrescenta o clipe em outra categoria

Localiza clipes parecidos


FRONTPAGE 2000

Depois de ter includo imagens, voc pode arrast-las e solt-las em diferentes pontos da pgina. Alm disso, voc pode dar um clique duplo em qualquer imagem e o FrontPage ativar o programa de edio de imagens que estiver configurado, permitindo que voc faa modificaes nessa imagem especfica.

OBSERVAO

Para verificar o editor de imagens configurado no FrontPage, clique no menu Ferramentas / Opes, na guia Configurar editores veja se existe algum editor configurado para arquivoc do tipo gif ou jpg.

Se no existir nenhum editor configurado conforme a figura anterior, clique no boto Adicionar e preencha os campos com as informaes solicitadas.


FRONTPAGE 2000

INSERINDO IMAGENS DE ARQUIVOS

Qualquer imagem pode ser inserida no FrontPage. Para isto:

1. Clique no menu Inserir / Figura / Do arquivo ou no boto Inserir figura do arquivo na barra de ferramentas.

2. Para inserir uma figura que j faz parte da sua Web, localize-a na lista de arquivos e clique sobre ela.

3. Se a imagem ainda no faz parte da sua Web, escolha uma das opes pela internet, um arquivo do winchester, pelo scanner ou um clip-art, indicadas na figura acima.

4. Selecionada a imagem, clique em OK.

Se necessrio, o FrontPage converter automaticamente outros tipos de imagem para o formato GIF ou JPEG.

VDEO

Voc poder adicionar pgina vdeos em formato avi, asf, ram, e ra para que os visitantes do site tenham um contedo mais chamativo.

Para inserir vdeo em uma pgina, clique no menu Inserir / Figura / Vdeo.

Clique para escolher umafigura que faz parte doClipArt do Microsoft Office.

Clique para abriro navegador ebuscar umaimagem naInternet.

Clique para usar o Scanner paraadquirir uma imagem.

Clique para escolherum arquivo deimagem qualquergravado em disco


FRONTPAGE 2000

Escolha um vdeo que esteja armazenado no winchester ou em qualquer outro meio e clique em OK.

Aps inserir o vdeo voc pode control-lo. Clique sobre a imagem do vdeo com o boto direito do mouse e escolha a opo Propriedades da figura.


FRONTPAGE 2000

Voc pode escolher mostrar os controles de vdeo no navegador, pode determinar quantas vezes o vdeo ser executado, qual ser o atraso entre uma reproduo e outra e quando o vdeo ser iniciado. Experimente!

MAPA DE IMAGENS

Usando o mapa de imagens, voc pode vincular vrias reas de uma imagem a diferentes pontos da Web, ou seja criar hyperlinks diferentes em cada parte da imagem, dependendo de onde o usurio clicar ele ser conduzido para o local indicado pelo hyperlink.

Certifique-se de escolher uma imagem boa e facilmente discernvel para usar, e desenhe os pontos ativos claramente, de modo que, antes de clicarem em qualquer ponto do seu mapa de imagens, os visitantes sempre saibam para onde estaro indo.

TRANSFORMANDO AS IMAGENS EM UM MAPA DE IMAGEM:

No FrontPage selecione o grfico que servir como mapa de imagens. A barra de ferramentas Figura destacada e torna-se disponvel (normalmente na parte inferior da tela).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

1. Insere uma figura de arquivo.

2. Insere texto sobre a figura.

3. Cria uma autominiatura da figura selecionada.

4. Determina uma posio absoluta para a figura. Utilizando este comando a figura poder ser posicionada em qualquer ponto da pgina.

5. Traz a figura para frente de outro objeto.

6. Leva a figura para trs de outro objeto.

7. Gira a figura para a esquerda.

8. Gira a figura para a direita.

9. Inverte a direo da figura horizontalmente.

10. Inverte a direo da figura verticalmente.

11. Aumenta o contraste das cores da figura.

12. Diminui o contraste das cores da figura.

13. Aumenta o brilho da figura.

14. Diminui o brilho da figura.

15. Corta uma parte da figura.

16. Define uma das cores da figura como transparente.

17. Modifica a figura para branco e preto ou colorido.


FRONTPAGE 2000

18. Desbota a figura.

19. Cria o efeito de chanfrado na figura.

20. Obtm uma nova amostra da figura.

21. Seleciona a figura.

22. Cria um hyperlink em forma de tringulo.

23. Cria um hyperlink em forma de elipse.

24. Cria um hyperlink em forma de polgono.

25. Destaca as reas de hyperlink da figura.

26. Restaura a figura s propriedades originais.

Se quiser desenhar um ponto ativo quadrado ou retangular na imagem, selecione o boto rea interativa em forma de retngulo. Para criar um ponto ativo circular, selecione o boto rea interativa circular . O boto rea interativa em forma de polgono permite que voc desenhe pontos ativos em forma de polgonos de vrios lados.

1. Desenhe o ponto ativo na imagem. Este ponto ativo dever envolver toda a rea que o visitante poder clicar.

2. Quando voc tiver terminado de desenhar os pontos ativos, a caixa de dilogo Criar Hyperlink aparecer.

3. Atravs desta tela voc poder criar hyperlink normalmente, como descrito mais detalhadamente nesta apostila no item Hyperlink.

4. Repita os passos acima para cada ponto ativo que desejar criar nesta imagem.


FRONTPAGE 2000

5. Salve o arquivo e examine-o por meio do navegador da Web.

CRIANDO UM VNCULO PADRO

O vnculo padro ser ativado quando algum clicar dentro da imagem, porm, fora de todos os pontos ativos criados. Os vnculos de pontos ativos sempre tm prioridade sobre o vnculo padro que voc informar.

Para determinar este link:

1. Clique com o boto direito do mouse sobre a figura e selecione a opo Propriedades da figura.

2. Na caixa Hyperlink padro local, voc pode digitar (ou localizar) o nome de arquivo ou URL referente ao local ao qual deseja que essa imagem conduza o visitante quando eles clicarem fora do ponto ativo.

3. Clique em OK.

4. Salve o arquivo e examine-o por meio do navegador da Web.


FRONTPAGE 2000

TEMAS Usar Temas como usar um decorador de interiores em cada pgina do site e garantir que

todas as pginas combinem agradavelmente umas com as outras. Os temas possibilitam que voc construa um site inteiro no qual todos as pginas exibam uma aparncia coerente, o que auxilia o visitante da sua Web a percorr-lo de uma forma mais agradvel e simples.

Os temas alteram o efeito de toda a pgina da Web. Eles personalizam a fonte, cor, altura e as caractersticas do texto de maneira que as informaes fiquem em harmonia com o modo que os grficos aparecem. Automatizam a coordenao entre grficos de fundo, cores, marcadores, manchetes e linhas horizontais.

O uso de temas, alm de melhorar a aparncia, muitas vezes, diminui o tempo de download do seu site da Web. Se, para tentar emular o modo pelo qual os temas funcionam, voc inserir vrios grficos e imagens na sua pgina, rapidamente descobrir que o download de cada pgina poder levar um bom tempo. Os temas do FrontPage, por outro lado, tiram proveito de cache do navegador e permitem que voc faa download de diversos grficos apenas uma vez, mas os veja em vrias pginas.

Para definir um Tema vlido para todo um site, primeiro abra o site da Web do FrontPage que voc deseja alterar.

1. Clique no menu Formatar / Tema.

2. Escolha um dos temas da lista de acordo com a visualizao que mais lhe agradar.

3. Logo abaixo da caixa que contm a lista de temas, encontra-se um conjunto de trs caixas de verificao que permitem que voc escolha e use apenas certas partes de um tema que voc desejar:

Cores vivas: ativa e desativa o uso de cores vivas e brilhantes.

Elem. grficos ativos: ativa e desativa GIFs animados.


FRONTPAGE 2000

Figura de plano de fundo: quando ativado, aplica a imagem de fundo do tema, no permitindo que voc personalize.

4. Clique no boto OK e o FrontPage percorrer todo o site e, a cada pgina, acrescentar os componentes do tema.

PERSONALIZANDO OS TEMAS

Voc tambm poder formatar ou personalizar um tema com as suas preferncias de cor, fonte e elementos grficos que faro parte do tema.

Clique no menu Formatar / Tema e clique no boto Modificar.

ALTERANDO AS CORES

Para modificar as cores clique no boto Cores.

Ser mostrado na guia Esquema de cores os esquemas j existentes. Ao clicar em qualquer um dos esquemas, as cores selecionadas sero mostradas ao lado no tema.

Tambm possvel utilizar um disco de cores onde o FrontPage jogas as cores mais apropriadas para fazerem jogo com a que voc escolheu.


FRONTPAGE 2000

Se desejar poder alterar o brilho das cores movendo o controle deslizante de Brilho.

Mas voc poder escolher uma cor especfica para cada elemento da pgina. Clique na guia Personalizar, escolha qual elemento voc quer alterar a cor na caixa Item e depois altere a Cor e clique em OK e novamente em OK.


FRONTPAGE 2000

ALTERANDO OS ELEMENTOS GRFICOS

Os elementos grficos so todos as imagens que fazem parte do tema, como a faixa de pgina, os marcadores, a linha horizontal, a barra de navegao e etc. Ao alter-los voc estar modificando radicalmente o tema. Para alterar os elementos grficos, clique no menu Formatar / Tema clique no boto Modficar e clique no boto Elemen. grfico ser exibida a seguinte janela:

1. Primeiro selecione o Item que ser alterado o grfico.

2. Conforme o item escolhido ser necessrio alterar mais de uma figura. No caso do item Faixa teremos que escolher apenas uma figura. Clique no boto Procurar e escolha uma imagem que j est na Web ou uma imagem do winchester.

Lembre-se que s podero ser utilizadas imagens no formato .gif, .jpg ou .png.

3. Depois de escolher a imagem clique em OK e se necessrio em OK novamente.

4. Alm de modificar a imagem, voc precisar fazer ajustes na fonte utilizada sobre o objeto grfico. Clique na guia Fonte escolha uma fonte, escolha um Tamanho, defina o Estilo, e qual o Alinhamento horizontal e Vertical do texto.

5. Clique em OK e em OK novamente.


FRONTPAGE 2000

ALTERANDO O FORMATO DO TEXTO

Para cada tipo de texto que temos em uma pgina uma fonte diferente pode ser definida. Como por exemplo, ttulos, sub-ttulos, corpo de texto, etc.

Fazendo esta alterao no tema ser bem mais rpida a construo do site.

Clique no menu Formatar / Tema e clique no boto Texto.

1. Primeiro selecione o Item que ser alterado.

2. Depois escolha a fonte que ser utilizada. Voc poder visualiz-la do lado direito da tela.

Para alterar outros estilos de texto, clique no boto Mais estilos. Escolha qual ser o comando HTML a ser formatado.


FRONTPAGE 2000

Clique no boto Modificar e dentro da janela que ser exibida clique no boto Formatar e escolha qual o tipo de formatao desejar.

3. Aps alterar todos os estilos de texto clique em OK e em OK novamente.

SALVANDO O TEMA

Se voc vai utilizar essas mesmas formataes em outros sites conveniente salvar essas formataes em um novo tema.

Clique no boto Salvar como e digite um nome significativo para o tema criado. Depois clique no boto OK. Desta maneira o tema personalizado est salvo e poder ser utilizado em outros sites.

TRABALHANDO COM COMPONENTES Os componentes so elementos especiais destinados Web que agregam movimento e

interao com os seus visitantes, mesmo que estes no selecionem um vnculo de hipertexto ou cliquem no boto Voltar dos seus navegadores.

Muitos dos elementos ativos includos no FrontPage so escritos em linguagens avanadas de programao para a Web (por exemplo, JavaScript).

Nem todos os navegadores oferecem suporte a applets em Java executados em uma pgina da Web. Quando voc usar um boto em foco ou outros applets em java, sempre inclua na sua pgina da Web um aviso de que este site usa JavaScript.

Veja abaixo alguns exemplos de componentes.


FRONTPAGE 2000

LETREIRO DIGITAL

Os letreiros digitais funcionam exatamente como voc poderia supor: palavras e frases rolam para a esquerda ou para a direita pela tela.

O componente Letreiro digital no um applet Java. Os letreiros digitais so tags HTML que foram lanadas pela Microsoft em 1996. Essa uma tag exclusiva da Microsoft, portanto no reconhecida ou aceita por qualquer outro navegador. Este elemento s deve ser usado quando voc tiver certeza que os visitantes da sua pgina estaro usando o Microsoft Internet Explorer.

INSERINDO UM LETREIRO DIGITAL

1. Deixe o cursor na posio da pgina onde deseja que o Letreiro digital seja inserido.

2. Clique no menu Inserir / Componente / Letreiro digital.

3. Digite a frase desejada na caixa Texto.

4. Altere os demais parmetros da forma que preferir.

Direo: a direo que o texto se movimentar para a Esquerda ou para a Direita.

Velocidade: velocidade de movimentao. Onde voc precisar definir o:

* Intervalo: tempo em milissegundos que ser aguardado at que o texto comece a se mover.

* Quantidade: a distncia em pixels que o texto ir se mover.

Comportamento: o comportamento do texto. Trs opes esto disponveis: Rolar que a opo padro. Deslizar o texto rola at o lado oposto da tela e pra. Alternar alterna entre rolagem e deslizamento.

Alinhar com texto: define o alinhamento da caixa do letreiro em relao ao texto adjacente.


FRONTPAGE 2000

Tamanho: define a largura e a altura do letreiro. definida quando voc utiliza as alas de redimensionamento.

Repetir: define se o letreiro ser exibido Continuamente ou nmero especfico de Vezes.

Cor do plano de fundo: define a cor de preenchimento da caixa do letreiro, se automtico a cor definida transparente.

5. Clique em OK. Salve o arquivo e visualize no navegador para testar.

Para fazer alteraes no texto ou no comportamento do Letreiro digital, d um clique com o boto direito do mouse e selecione Propriedades do letreiro digital ou d um clique duplo sobre a caixa do letreiro. A caixa de dilogo do Letreiro digital aparece novamente, ento faa as alteraes necessrias e clique em OK.

GERENCIADOR DE ANNCIOS EM FAIXA

Este componente um Applet Java que tem como objetivo adicionar vrias imagens no mesmo ponto de uma pgina, de forma que aparea uma por vez, com um efeito de transio entre todas as imagens especificadas.

INSERINDO UM GERENCIADOR DE ANNCIOS EM FAIXA

1. Clique no menu Inserir / Componente / Gerenciador de anncios em faixa.

2. Configure as opes da caixa de dilogo exibida:

Largura: largura em pixels, da faixa que contm oconjunto de imagens. Que pode ser alterada pelas alas que so mostradas quando o objeto est selecionado.

Altura: altura em pixels, da faixa que contm o conjunto de imagens. Que pode ser alterada pelas alas que so mostradas quando o objeto est selecionado.

Efeito de transio: efeito que ser executado ao passar de uma imagem para outra.


FRONTPAGE 2000

Mostrar cada figura por (segundos): tempo que cada imagem ser exibida, em segundos.

Vincular a: endereo ou nome do arquivo ao qual os visitantes sero conduzidos se clicarem em qualquer ponto deste conjunto de imagens.

Figuras a serem exibidas: conjunto de imagens que o FrontPage deve carregar em seqncia. Para adicionar cada imagem, clique no boto Adicionar e escolha a imagem da pasta do site, do winchester ou do clipart.

3. Depois que adicionar todas as imagens, clique em OK.

4. Salve o arquivo e visualize no navegador para testar.

Para fazer alteraes nas imagens ou no comportamento do Gerenciador de anncios em faixa, d um duplo sobre a faixa. A caixa de dilogo do gerenciador aparece novamente, ento altere e clique em OK.

BOTO EM FOCO

Este um boto especial que executa um efeito visual toda vez que o mouse paira sobre ele. Os botes em foco podem aparecer como simples botes de texto, conduzir a outros sites da Web, disparar sons sempre que o mouse se mova sobre ele e efetuar vrias outras aes.

INSERINDO UM BOTO EM FOCO

1. Clique no menu Inserir / Componente / Boto em foco.

2. Atravs desta caixa de dilogo, voc pode personalizar o modo pelo qual o boto em foco aparece na tela do navegador.

Texto do boto: texto que aparece no boto. Para alterar a aparncia do texto, clique no boto Fonte.

Vincular a: endereo ou nome do arquivo ao qual os visitantes sero conduzidos se clicarem em qualquer ponto deste boto em foco.

Cor do boto: cor inicial com a qual o boto aparece na tela.

Cor do plano de fundo: cor que ser utilizada na criao do efeito.

Efeito: seleciona qual efeito visual o boto em foco exibir quando o mouse se mover sobre ele.


FRONTPAGE 2000

Cor do efeito: cor que ser aplicada sobre a cor do boto em foco quando o mouse se mover sobre ele. A maneira da aplicao da cor depender do efeito escolhido.

Largura e altura: largura do boto (em pixels) e altura do boto (em pixels).

3. Salve o arquivo e visualize no navegador para testar.

Se em vez de texto voc quiser que o boto mostre uma imagem e ao receber o foco, ou seja, quando o ponteiro do mouse pairar sobre o boto, a imagem seja modificada basta personalizar o boto. Tambm poder ser inserido um som no boto.

Clique no boto Personalizar.

Para Tocar som ao clicar clique no boto Procurar e escolha um som que esteja j na web ou um som do winchester, o mesmo procedimento deve ser feito para Tocar um som ao focalizar o boto.

Para escolher uma Figura personalizada para o Boto clique no boto Procurar correspondente e selecione uma imagem da web ou do winchester. O mesmo deve ser feito para escolher a imagem Ao focalizar.

PGINA DE INCLUSO

Em muitos sites necessrio que se crie um rodap padro em todas as pginas, neste rodap podem estar links ou apenas o endereo e o telefone da empresa. Isto acaba sendo trabalhoso quando temos um site muito grande para ser construdo. O que seria mais fcil se construssemos o rodap em um arquivo e quando necessrio acrescentssemos este arquivo no que estamos construindo. exatamente isso que a pgina de incluso faz.

1. Crie o arquivo que ser padro (Ex.: rodap) e salve-o como um HTML.

2. Crie o arquivo onde o rodap dever ser inserido. Posicione o curso onde o rodap dever aparecer.

3. Clique no menu Inserir / Componente / Pgina de incluso.


FRONTPAGE 2000

4. Clique no boto Procurar, selecione o arquivo que ser includo na pgina e clique em OK e OK novamente.

FIGURA OU PGINA DE INCLUSO PROGRAMADA

A figura ou pgina de incluso programada tem a mesma aplicao da pgina de incluso, s que voc determina durante qual perodo eles sero visualizados. Um exemplo seria uma promoo que uma determinada empresa queira fazer durante uma semana especfica. O texto com a chamada da promoo s deve aparecer na pgina naquela semana, em vez de criar duas pginas, uma com o contedo normal e outra acrescida da promoo. Crie o arquivo com o contedo normal e um outro arquivo com as informaes e imagens sobre a promoo e acrescente esta pgina usando a programao.

1. Crie o arquivo que dever aparecer s no perodo especfico. Abra o arquivo que conter o arquivo criado e posicione o cursor onde o texto ou a imagem deve aparecer.

2. Clique no menu Inserir / Componente / Pgina de incluso programada.

3. Na caixa Pgina a ser includa durante o horrio agendado digite o endereo do site aps a publicao seguido do nome do arquivo que dever ser includo. Ex.: http://www.cursozargon.com.br/promocao.htm.

4. Se algum arquivo for includo na pgina original Antes e depois do horrio agendado (opcional), digite o endereo do site aps a publicao seguido do nome do arquivo que dever ser includo.

5. Na caixa Iniciando em defina a data e a hora para que a pgina seja inserida.

6. Na caixa Terminando em defina a data e a hora para que a pgina inserida no seja mais exibida.

7. Clique em OK.

Se quiser que uma imagem seja includa na pgina por um determinado perodo clique no menu Inserir / Componente / Figura programada e preencha os campos solicitados da mesma maneira que incluir uma pgina.


FRONTPAGE 2000

HYPERLINK A criao de hyperlinks permite que, partir da pgina da Web, voc aponte para outra

pgina localizada em qualquer ponto da Internet, literalmente qualquer um dos milhes de arquivos HTML.

Os vnculos de hipertexto so a principal razo para a Web ser to popular. A possibilidade de, por meio de um simples vnculo, se estabelecer conexo entre itens de informao inter-relacionados atraente e revela de onde a WWW extraiu seu nome da construo de uma teia de vnculos espalhados pelo mundo.

A escolha da palavra, frase ou imagem que ser o vnculo importante, porque, antes que os seus visitantes cliquem em um vnculo, voc sempre desejar fornecer-lhes pistas descritivas sobre o destino em questo.

Os principais tipos de hyperlink so: para E-Mail, para outra pgina da mesma Web ou outra Web, e para a mesma pgina. Estes hyperlinks sero descritos a seguir.

1. Digite o texto ou insira a imagem que dever ser o vnculo.

2. Selecione este texto ou imagem e clique no menu Inserir / Hyperlink (voc pode

tambm clicar no boto Hyperlink ou ainda, se preferir, pressionar as teclas Ctrl e K simultaneamente).

3. A janela acima permite criar diversos tipos de link. Se o arquivo desejado j faz parte da sua Web, s clicar no nome do mesmo e clicar em OK. Se o link desejado no um arquivo que faz parte da sua Web, observe as opes abaixo, e clique no cone desejado:

Cria link para um endereo na WWW.


FRONTPAGE 2000

Cria link para um arquivo qualquer que est armazenado em disco.

Cria link para e-mail.

Cria um link para uma nova pgina a ser criada no momento da criao do link.

Cria link para um local especificado na mesma pgina.

PARA UM ENDEREO NA WWW

O navegador ser aberto. Navegue at a pgina desejada e depois volte para o FrontPage. Aparecer na tela de criao de link o endereo que voc deixou na tela do navegador. Se desejar j digite o endereo da pgina que deseja que os usurios de site acessem.

PARA E-MAIL

Digite o endereo desejado e clique em Ok.

PARA OUTRA PGINA

Localize o arquivo gravado em disco. Clique sobre o nome do arquivo desejado e clique em Ok.

PARA OUTRO PONTO NA MESMA PGINA

Para criar um link para outro ponto do mesmo arquivo, antes de chamar a tela de criao de Hyperlink, ser necessrio criar o Indicador.

Indicador um nome que atribudo a um ponto qualquer da pgina. Funciona como uma marca, uma identificao daquele ponto da pgina.

1. Aps selecionar a palavra ou figura que ser o indicador, clique no menu Inserir / Indicador.


FRONTPAGE 2000

2. D um nome para o indicador e clique em OK.

3. Clique no menu Inserir / Hyperlink.

4. Escolha um dos indicadores na caixa Indicador e clique em OK.

5. O link para pontos diferentes da mesma pgina est pronto.

TABELA Uma tabela propicia um meio para organizao de informaes existentes em uma pgina da

Web, mediante o uso de linhas e colunas. Em virtude da flexibilidade que oferecem, so muito utilizadas pela possibilidade de estruturar texto e imagens posicionados de formas diversas.

Para inserir uma tabela em uma pgina, clique no menu Tabela / Inserir / Tabela.

Preencha as opes da caixa de dilogo para montar a tabela:

Linhas: especifica o nmero de linhas da tabela.

Colunas: especifica o nmero de colunas da tabela.

Alinhamento: especifica o alinhamento da tabela em relao pgina. Esquerda, Direita, Centralizado e Justificar.


FRONTPAGE 2000

Tamanho da borda: especifica a largura da borda da tabela. Este valor deve estar entre 0 e 100. Quando 0 (zero) a borda fica invisvel.

Enchimento da clula: o nmero de pixels entre a borda da tabela e o contedo de uma determinada clula.

Espaamento da clula: o nmero de pixels entre clulas de uma tabela. Quando alterado reflete nas bordas da tabela.

Especificar largura: largura da tabela. Poder ser definida em porcentagem ou em pixels. mais provvel que voc queira especificar a largura por porcentagem, de modo que a tabela possa fazer automaticamente seu prprio redimensionamento segundo o tamanho do monitor de cada visitante.

Escolha as configuraes desejadas e clique em OK.

MODIFICANDO ATRIBUTOS DA TABELA

Para alterar atributos da tabela, clique dentro da tabela com o boto direito do mouse, e selecione a opo Propriedades da tabela, ou clique no menu Tabela / Propriedades /Tabela.

Atributos que podem ser alterados:

Alinhamento: H quatro opes: Esquerdo, Direito, Centralizado e Justificar.

Flutuar: determina como o texto em volta da tabela se comportar.

Enchimento da clula: determina o espao entre o contedo das clulas e as bordas da tabela.

Espaamento da clula: determina a distncia entre uma clula e outra da tabela.

Especificar largura e Especificar altura: determina o tamanho da tabela, evitando assim que ela se redimensione sozinha.


FRONTPAGE 2000

Bordas: para as bordas podemos determinar vrias configuraes.

Tamanho: determina a espessura da borda. Quando zero a borda fica invisvel.

Cor: determina a cor da borda. Se determinada uma cor para a Borda clara ou uma cor para a Borda escura, a cor ser utilizada como a segunda cor da borda. Mas se escolher uma cor para a Borda clara e uma outra cor para a Borda escura, a Cor no ser utilizada.

Plano de fundo: determina o prenchimento utilizado no fundo da tabela.

Voc poder utilizar tambm uma cor como plano de fundo atravs da opo Cor.

Para escolher uma imagem para plano de fundo da tabela, habilite a opo Usar figura como plano de fundo e clique no boto Procurar e localize o arquivo que ser utilizado.

MODIFICANDO ATRIBUTOS DA CLULA

Para modificar alguns atributos das clulas, selecione as clulas a serem alteradas e clique sobre uma delas com o boto direito do mouse. Selecione a opo Propriedades da clula.

Alm dos atributos que so comuns aos descritos no item anterior (Modificando atributos da Tabela) e que agora sero aplicados somente s clulas selecionadas, podemos definir tambm:

Alinhamento Horizontal e Vertical: define como o texto ser alinhado dentro das clulas. Sendo que para o alinhamento horizontal temos as opes Esquerdo, Direito, Centralizado e Justificar. E para o alinhamento vertical temos as opes Parte superior, Parte inferior, Meio e Linha de base.

Se for trabalhar com clulas mescladas precisar definir se a mesclagem ser feita em linha ou em coluna. Para mesclar em linha, informe quantas linhas fazem parte da mesclagem na caixa Linhas includas. Para mesclar em coluna, informe quantas colunas fazem parte da mesclagem na caixa Colunas includas.


FRONTPAGE 2000

INCLUINDO LINHAS E COLUNAS

Para inserir linhas ou colunas, deixe o cursor em uma clula prxima ao local que dever ser feita a insero.

1. Clique no menu Tabela / Inserir / Linhas ou colunas.

2. Clique Colunas se quiser inserir colunas ou Linhas se quiser inserir linhas.

3. Em Nmero de linhas, defina o nmero de linhas ou colunas que sero inseridas.

4. Para definir a posio da linha ou coluna a ser inserida, escolha Acima da seleo para inserir acima da clula que foi selecionada, ou Abaixo da seleo para inserir abaixo da clula selecionada.

5. Clique em OK.

REMOVENDO LINHAS E COLUNAS

1. Selecione a linha ou coluna que ser removida.

2. Clique no menu Tabela / Excluir clulas.

MESCLANDO E DIVIDINDO CLULAS

Em muitos casos necessrio que uma nica clula se transforme em duas ou que quatro clulas se transformem em uma para podermos criar um ttulo.

Para mesclar as clulas:

1. Selecione as clulas que sero mescladas.

2. Clique no menu Tabela / Mesclar clulas.

Para dividir a clula:

1. Selecione a clula que ser dividida.

2. Clique no menu Tabela / Dividir clulas.


FRONTPAGE 2000

3. Marque se a clula ser dividida em colunas (Dividir em colunas) ou se ser dividida em linhas (Dividir em linhas).

4. Depois defina qual o Nmero de linhas ou Colunas a clula ser dividida.

5. Clique em OK.

QUADROS Os quadros (frames) so utilizados para dividir a tela em quadros independentes, que se

relacionam atravs de links. Atravs dos quadros podemos carregar vrias pginas HTML ao mesmo tempo sem que uma, necessariamente, sobreponha a outra.

CRIANDO PGINAS COM QUADROS

1. Para criar pginas utilizando Quadros.

2. Clique no menu Arquivo / Novo / Pgina.

3. Clique sobre a guia Pginas de quadros.


FRONTPAGE 2000

Nesta caixa de dilogo, h uma lista com vrios modelos diferentes de quadros que o FrontPage permite que voc construa. No lado direito h uma anteviso grfica de como ficar a aparncia de cada um desses modelos.

Selecione o modelo que desejar e clique em OK.

CONFIGURANDO CADA QUADRO

De acordo com o modelo escolhido, o FrontPage divide a tela em quadros. Cada quadro ter uma pgina HTML. O exemplo abaixo foi dividido em quatro quadros. Cada quadro chamado de quadro de destino.

Devemos agora atribuir a cada quadro um arquivo HTML. Podemos fazer esta atribuio a arquivos j existentes, ou a novos arquivos.

Para cada quadro, devemos clicar em uma das duas opes que ele oferece:

Definir pgina inicial: para atribuir a um arquivo j existente. Aps clicar sobre ele, localize o arquivo desejado e clique em OK.

Nova pgina: cria um novo arquivo para ser colocado naquele quadro.

Aps definir arquivos para todos os quadros, o prximo passo salvar o os quadros.

SALVANDO QUADROS


FRONTPAGE 2000

Para salvar, clique no menu Arquivo / Salvar.

Estaremos salvando todos os arquivos posicionados nos quadros e ainda ser pedido para que voc salve o arquivo principal de Quadros. Este arquivo principal no ser visualizado no navegador, ele apenas ser responsvel por armazenar os comandos necessrios para associar cada arquivo seu Quadro correspondente e mais todas as propriedades e configuraes que voc alterar no Quadro.

Observe bem a caixa de dilogo para salvar, pois, no lado direito ser exibida uma visualizao indicando qual arquivo dever ser salvo no momento. No primeiro exemplo abaixo, ser salvo o arquivo principal de quadros. E no segundo, ser salvo o quadro inferior.

Salve todos os arquivos que o FrontPage pedir, dando nome e ttulo para facilitar o manuseio destes arquivos posteriormente.


FRONTPAGE 2000

CONFIGURANDO PROPRIEDADES DOS QUADROS

Para acessar as propriedades do frame, clique com o boto direito do mouse sobre o quadro e clique em Propriedades do quadro.

O Nome que aparece o nome do quadro no qual voc clicou. Defina o nome que ser mais fcil para identificar o quadro quando fizer hyperlinks.

Pgina inicial o arquivo que ser visualizado naquele quadro quando a pgina de quadros for aberta. Se desejar alterar a pgina inicial, clique no boto Procurar, selecione o arquivo desejado e clique em OK.

Tamanho do quadro: define o tamanho de cada quadro. O ideal redimensionar o quadro utilizando as setas de redimensionamento nas bordas do quadro, assim visualizamos o tamanho desejado e o FrontPage atualiza a caixa Tamanho do quadro automaticamente.

Margens: a distncia em pixels que o texto dentro do quadro ficar afastado das bordas esquerda e direita (Largura) e das bordas superior e inferior (Altura).

Redimensionvel no navegador: quando habilitado, permite que o visitante da pgina redimensione as bordas de cada quadro, enquanto navega pela Web. Isso pode ocorrer quando uma pessoa que utilize uma resoluo de tela menor visite seu site, ou quando um visitante quiser expandir um quadro para ver uma imagem maior.

Mostrar barras de rolagem: define sobre a exibio das barras de rolagem durante a navegao na Web. As trs opes disponveis so: Sempre, Nunca, ou Se preciso.


FRONTPAGE 2000

DESATIVANDO AS BORDAS DOS QUADROS E CONTROLANDO OS ESPAOS ENTRE OS QUADROS

Clique com o boto direito do mouse sobre um dos quadros, e em seguida, Propriedades do quadro. Acesse o boto Pginas de quadros.

A opo Espaamento do quadro define em pixels a margem entre os quadros.

A opo Mostrar bordas quando habilitada, permite a exibio das bordas que dividem os quadros.

CRIANDO VNCULOS ENTRE QUADROS

Normalmente, quando criamos vnculos (links) entre pginas e o visitante clica sobre um destes links, toda a pgina substituda pela pgina chamada.

Para criar vnculos em quadros, h mais uma opo que dever ser considerada: em qual quadro carregar a pgina chamada no link.

Crie um vnculo (hyperlink) como normalmente criaria (como foi descrito em um captulo anterior desta apostila). Antes que voc clique em OK, observe a opo Quadro de destino localizada na parte inferior da caixa de dilogo Criar hyperlink.

Clique no boto Alterar o quadro de destino.


FRONTPAGE 2000

Na caixa de dilogo Quadro de destino, clique sobre o desenho do quadro onde a pgina dever aparecer. Clique em OK e em seguida, OK novamente.

Se desejar que a pgina definida no link seja aberta em uma nova janela do navegador clique na opo Nova janela. Para abrir a pgina chamada no link no mesmo quadro selecione a opo Mesmo quadro. Para que a pgina aberta ocupe a janela inteira, ou seja, apague todos os quadros, selecione a opo Pgina inteira. Para que a pgina seja aberta no quadro anterior ao do link, selecione a opo Quadro pai.

DIVIDINDO E EXCLUINDO QUADROS

Cada quadro existente pode ser dividido ou ate mesmo excludo da pgina que voc est construindo.

Para excluir um quadro, clique dentro do quadro a ser excludo, depois clique no menu Quadros / Excluir quadro.

Para dividir um quadro, selecione o quadro a ser dividido, clique no menu Quadros / Dividir quadro.

Defina como ser feita a diviso se em colunas (Dividir em colunas) ou se em linhas (Dividir em linhas) e clique em OK.


FRONTPAGE 2000

FORMULRIO Normalmente, os visitantes que passam pela pgina da Web s chegam a ler o texto que

voc digita e ver as imagens que voc inclui. A web tipicamente uma conversao unilateral. Os visitantes simplesmente navegam e clicam em diferentes vnculos.

Os formulrios alteram o paradigma da Web ao permitirem que os visitantes respondam a determinadas perguntas e digitem dados quando visitarem certos tipos de pginas.

Os formulrios so parte integrante da comunicao com os visitantes e de permitir que eles participem do site.

Para criar formulrios, necessrio que voc acrescente itens especiais, denominados elementos de formulrios, na pgina.

Alm dos diferentes campos de formulrio, cada formulrio possui um boto intitulado Submeter. Este boto permite que os visitantes sinalizem quando terminarem de digitar suas informaes e envia os dados ao servidor da Web que hospeda a pgina.

Para fazer formulrios funcionarem apropriadamente, nem sempre necessrio que voc utilize um servidor da Web que oferea suporte s extenses do FrontPage. Contudo, para usar este recurso interativo, voc precisa ter permisso especial do seu provedor da Web. Entre em contato com a empresa que hospeda o site e verifique se ela permite que voc use formulrios na pgina. Caso contrrio, quando os visitantes clicarem no boto Submeter, nada acontecer.

INSERINDO CAMPOS DE FORMULRIO

Para inserirmos campos de formulrio utilizaremos o menu Inserir / Formulrio.

Assim que voc inserir o primeiro campo de formulrio, aparecer na tela um limite pontilhado com os botes: Submeter e Redefinir. Todos os outros campos deste formulrio devero ser inseridos dentro do limite pontilhado para que faam parte do mesmo formulrio.

CAIXA DE TEXTO

Para inserir uma caixa de texto de formulrio, clique no menu Inserir / Formulrio / Caixa de texto de uma linha. Esta caixa tem propriedades que devem ser alteradas clicando sobre ela com o boto direito do mouse e em seguida, Propriedades do campo do formulrio ou dando clique duplo sobre o campo.

Nome: nome pelo qual o FrontPage identificar este campo dentro deste formulrio. Este campo obrigatrio e deve ser preenchido para todos os outros tipos de campos do FrontPage. Alm de identificar o campo para o FrontPage, este nome o que estar visvel no e-mail que receberemos com os dados do usurio do site.


FRONTPAGE 2000

OBSERVAO

Ao dar nome aos campos do formulrio no utilize nenhum tipo de acentuao, nem espaos entre as palavras.

Valor inicial: texto que vai aparecer inicialmente na tela do visitante.

Largura em caracteres: tamanho da caixa de texto que ser apresentada na tela.

Ordem de tabulao: se o usurio estiver usando a tecla TAB para se movimentar pelo formulrio, o nmero digitado neste campo informar a ordem a seguir. No obrigatrio.

Campo de senha: quando Sim, o que o visitante digitar aparecer na tela em forma de asterisco como uma senha.

Para definir a quantidade de caracteres que so inseridos em uma caixa de texto, clique no boto Validar.

A maioria das opes nesta caixa de dilogo s funcionaro se o provedor que voc hospeda o site possuir as extenses do FrontPage, por este motivo vamos trabalhar apenas com as opes que no necessitam das extenses.

Marque a opo Necessrio para definir o mnimo e o mximo de dados necessrios neste campo. Na caixa Compr. mnimo digite a quantidade mnima de caracteres que devem ser digitados no campo. Na caixa Compr. mximo digite a quantidade mxima de caracteres que devem ser digitados no campo.

CAIXA DE SELEO

Esse campo possibilita que os visitantes selecionem itens em uma lista, em vez de digitarem as informaes por conta prpria.

Cada caixa de seleo deve ser inserida individualmente. Quando uma caixa marcada, seu valor gravado como ativo, caso contrrio, como desativado.


FRONTPAGE 2000

Para inserir caixas de seleo, clique no menu Inserir / Formulrio / Caixa de seleo.

Observe as propriedades da caixa de seleo clicando sobre a mesma com o boto direito e depois Propriedades do campo do formulrio ou dando clique duplo sobre a caixa de seleo.

Nome o nome dado cada uma das caixas de seleo.

Valor o valor que ser atribudo a esta caixa quando marcada pelo visitante.

Estado inicial como estar a caixa ao abrir o formulrio: Selecionado ou No selecionado.

BOTO DE OPO

Os botes de opo so semelhantes s caixas de seleo, exceto pelo fato de que, em uma lista de botes de opo voc pode selecionar somente uma das opes.

Para acrescentar um conjunto de botes de opo, clique no menu Inserir / Formulrio / Boto de opo para inserir um por um dos botes que compem um grupo.

Observe as propriedades dos botes de opo clicando sobre o mesmo com o boto direito e depois Propriedades do campo do formulrio ou dando clique duplo sobre o boto de opo.

Todos os botes que fazem parte de um grupo devero ter o mesmo Nome do grupo. A opo Valor que dar nome individual a cada um dos botes.

Tambm poder ser definida qual a opo j estar selecionada quando o visitante entrar na pgina, bastar marcar o Estado inicial como Selecionado. Mas se no quiser nenhuma opo marcada em todos os botes que criar marque o Estado inicial como No selecionado.

Rua dos Otoni, 881 - 9 Andar Pg.: 57 Belo

Documents

Apostila - FrontPage 2000