Академический Документы
Профессиональный Документы
Культура Документы
Apresentao
Microsoft Office Front Page
Modos de exibio
Salvando um arquivo
Abrindo os arquivos
Fechando uma pgina
Hiperlink
Boto Interativo
Formatando a pgina
Frames
Associando um Documento a um Frame
Contador de Visita
Tabelas
Letreiro digital
Tabela de layout
Efeitos DHTML
Imagens
Imagens mapeadas
Front Page
Apresentao
A World Wide Web, ou www, um servio da Internet no qual so acessadas informaes na
forma de hipertexto, ou seja, uma tecnologia utilizada que permite ao usurio ir de um documento a outro
atravs de hiperlinks.
Por exemplo, um texto na Web sobre tecnologia pode conter a palavra Bill Gates, que ao ser clicado, exibe informaes sobre o criador do Windows.
Neste caso, a palavra destacada o que chamamos de hiperlink ou link. Atualmente, podemos
utilizar imagens como links e estes podem reproduzir sons e videoclipes.
.
Microsoft Office Front Page
O Microsoft Office Front Page uma ferramenta poderosa para criao de sites da Web que paream e funcionem exatamente do modo que voc deseja.
Iniciando o Microsoft Office Front Page
Antes de iniciar o Microsoft Office Front Page 2003, voc tem que ter a noo de Digitao e Windows. Clique em Iniciar/Programas/Microsoft Office/Microsoft Office Front Page.
Barra de
Ttulo
Barra de
Menu
Barra de
Ferramentas
Barra de
Formatao
Nome da
Pgina
Painel de
Tarefas
Modos de
Exibio
Ao ser iniciado, a tela acima apresentada. No Painel de tarefas apresentado a direita da tela,
selecione a opo Abrir para abrir um site em construo existente ou em Criar uma nova pgina, para
darmos incio construo de uma nova pgina.
Use rea de trabalho para criar sua pgina. Para facilitar a criao de um menu personalizado,
utilize a opo de tabela, para organizar os itens.
Modos de exibio
Existem quatro modos de exibio no Front Page. So eles:
- Design: Mostra a pgina como ela est sendo construda. a opo mais usada para criar uma
pgina no Front Page;
- Diviso: Mostra o cdigo HTML e a pgina como ela est sendo construda;
- Cdigo: Mostra apenas o cdigo HTML;
- Visualizao: Mostra uma prvia da pgina, como ela ser visualizada no navegador.
Microlins Informtica
Front Page
Salvando um arquivo
Depois de editar uma pgina no Front Page voc deve salv-la antes de sair. Para salvar arquivos
no Front Page clique no menu Arquivo/Salvar ou clique no boto Salvar
dro. A caixa abaixo ser aberta:
Por padro, o Front Page indica que ir salvar os arquivos na pasta Meus Sites. No entanto, para facilitar, crie uma pasta com o nome do site
que voc est criando e em seguida,
salve todos os arquivos dentro dela.
Para criar uma pasta com a caixa de
Salvar como aberta, clique na ferramenta Criar nova pasta
. Digite o
nome da pasta e em seguida em OK.
Em Nome do arquivo, digite
o nome da pgina criada. Confirme
clicando no boto Salvar.
Observao: Se voc estiver trabalhando com vrios arquivos ao
mesmo tempo, para salvar todos de
uma s vez, clique no menu Arquivo/Salvar tudo.
Abrindo os arquivos
Clique no menu Arquivo/Abrir ou no boto Abrir
Microlins Informtica
Front Page
Tabelas
As tabelas podem ser usadas para organizar dados em linhas e colunas.
Voc acabou de ver uma tabela tradicional de dados que continha texto e nmeros. No entanto,
as tabelas tambm podem conter imagens, botes, listas e at mesmo outras tabelas. Por isso, a tabela
pode ser uma excelente ferramenta para criar o layout de uma pgina.
Essa uma tcnica que vrios Web designers usam. Com a estrutura de grade das tabelas, voc
pode alinhar e posicionar informaes facilmente.
Na ilustrao abaixo, as bordas da tabela esto visveis. Mas, na maioria das vezes, os designers
fazem com que as bordas fiquem invisveis.
As tabelas tambm podem ser usadas para criar um layout para pginas da Web.
As tabelas so compostas por linhas, colunas e clulas muito semelhantes s tabelas que voc
j deve ter usado em outros programas.
Para inserir uma tabela, voc tem duas opes:
1 Menu Tabela/Inserir/Tabela, a caixa abaixo se abrir:
Em Tamanho, escolha o nmero de linhas e
colunas.
Em Layout, a opo Alinhamento altera a
posio da tabela na pgina da Web.
Em Flutuao, altere a maneira como o texto e outros elementos da pgina da Web se organizam
em torno da tabela, se essa tabela no for to larga
quanto pgina da Web.
Em Enchimento da clula, digite a quantidade de espao, em pixels, que deve haver entre o contedo e as bordas internas das clulas da tabela. No
possvel definir o enchimento de uma clula individual da tabela.
Em Espaamento da clula, digite a quantidade de espao, em pixels, que deve haver entre as
clulas da tabela. No possvel definir o espaamento de uma clula individual da tabela.
Em Especificar largura voc pode definir a
largura da tabela como um valor especificado. Voc
pode especificar a largura em pixels ou como uma
porcentagem da largura da janela do navegador da
Web. Na caixa Especificar largura, digite um nmero
para a largura desejada e clique em Em pixels ou Em
porcentagem para indicar a unidade de medida.
Em Especificar altura voc pode definir a altura da tabela como um valor especificado.
Microlins Informtica
Front Page
Bordas
Em Tamanho, digite a largura, em pixels, que voc deseja para a borda da tabela.
Em Cor, altere a cor da borda da tabela e as bordas das clulas da tabela. Se voc aplicar uma
borda clara ou escura tabela, essa cor no ser exibida. Na caixa Cor, clique na cor desejada.
Recolher borda da tabela Apresenta as bordas das clulas da tabela como uma nica linha, em
vez de um par de linhas com espao entre elas.
Borda clara Altera a cor das bordas esquerda e superior da tabela e das bordas direita e inferior
das clulas da tabela. Aplicando cores claras e escuras a essas bordas, voc pode criar um efeito tridimensional para a tabela. Na caixa Borda clara, clique na cor desejada.
Borda escura Altera a cor das bordas direita e superior da tabela e das bordas esquerda e superior das clulas da tabela. Aplicando cores claras e escuras a essas bordas, voc pode criar um efeito tridimensional na tabela. Na caixa Borda escura, clique na cor desejada.
Plano de Fundo
Cor Altera a cor de plano de fundo da tabela. Na caixa Cor, clique na cor desejada.
Usar imagem de plano de fundo Adiciona um elemento grfico ao plano de fundo da tabela. Na
caixa, digite o caminho e o nome do arquivo grfico ou clique em Procurar para localizar o arquivo.
Procurar Clique para selecionar o arquivo do elemento grfico que voc deseja adicionar como
plano de fundo da tabela.
2 Clique sobre o boto Inserir Tabela
. Escolha o nmero de linhas e colunas que deseja como mostrado abaixo:
Depois de inserida a tabela em sua pgina, clique sobre ela com o boto direito do mouse e em seguida em Propriedades da tabela. A caixa mostrada acima se
abrir para que voc possa configurar a tabela. Para deixar a borda da tabela invisvel,
em Bordas, coloque o tamanho 0 (zero). Confirme com OK.
Voc pode tambm criar uma tabela dentro de outra tabela, Basta apenas
posicionar o cursor dentro da mesma e inserir uma tabela, utilizando um dos modos
vistos acima.
Agora que voc sabe como criar uma tabela, vamos comear a criar uma site
utilizando uma tabela de Layout.
Tabela de layout
Tabela de layout um tipo especial de tabela criada no
FrontPage. A ilustrao ao lado mostra um exemplo de uma dessas tabelas no modo Design.
Diferentemente das tabelas comuns com as quais voc
trabalhou at agora, as tabelas de layout oferecem vantagens
que o ajudam a criar o layout de uma pgina. Uma vantagem
bvia: h guias nas partes superior e inferior de cada coluna, o
que permite a voc saber a largura delas em pixels. Tambm h
guias nos lados da tabela, que informam a altura das linhas em
pixels.
Outra vantagem poder
mover o contedo de uma clula
para qualquer outro local da tabela
e tambm poder formatar as clulas
com bordas, cabealho e rodap da
clula e tambm cantos e sombras de clulas individualmente.
Para inserir uma Tabela de layout, clique no menu Tabela/Tabelas e
clulas de layout.
O painel de tarefas mostrar a caixa ao lado:
Localizado abaixo, escolha o layout que deve ter a sua tabela. Para
formatar a sua tabela, sempre deixe o cursor dentro da clula desejada.
Clique na opo Formatao da clula, o Painel de tarefas mostrar
as seguintes opes:
- Tabelas e Clulas de Layout: Para inserir
nova tabela e clulas;
- Propriedades e Borda da Clula: Voc
pode mudar opes como alinhamento, cor
de fundo, largura e cor da borda, etc.
-Cabealho e Rodap da Clula: Voc poMicrolins Informtica
Front Page
de inserir um cabealho e rodap, com cores e bordas diferentes para cada item;
- Cantos e Sombras da Clula: Voc pode inserir sombra, cor ou imagem nos cantos da clula, ou ainda
arredondar os cantos.
Observao: Depois de clicar na opo Tabelas e Clulas de Layout, clique em Formatao de
Clula para voltar a exibir as opes acima.
Imagens
O Front Page vem com um conjunto de imagens prontas para serem inseridos em uma pgina do
seu site. Para inserir essas imagens, clique no menu Inserir/Imagem/Clipart. No Painel de tarefas voc pode
escolher em Procurar por nome ou simplesmente navegar pelas imagens que so mostradas abaixo.
Ao escolher a imagem, para inseri-la em sua pgina, clique sobre a mesma e arraste para a pgina. Voc pode inserir uma imagem dentro de uma clula da tabela.
Para alinhar uma imagem pgina ou em uma clula de tabela, clique sobre ela para selecion-la
e em seguida utilize os botes de alinhamento de texto
gem e a caixa abaixo se abrir:
Do arquivo
Voc pode inserir imagens que estejam gravadas no seu computador. Clique no menu Inserir/Imagem/Do arquivo. A caixa abaixo ser aberta:
A pasta Minhas Imagens ser aberta. Se sua imagem estiver em
outra pasta, navegue pela caixa Examinar at encontrar as imagens. Clique
sobre ela e em seguida no boto Inserir.
Lembre-se, ao inserir imagens em sua pgina, as imagens devem estar dentro da mesma pasta onde esto gravados seus arquivos.
Voc pode tambm procurar
imagens na Internet, mas sempre deve
salv-las em seu computador, antes de
inseri-las em seu arquivo. Ao encontrar
as imagens desejadas na Internet,
clique sobre elas com o boto direito
do mouse e em seguida em Salvar
imagem como.
Escolha o local onde deseja salvar as imagens e confirme no boto Salvar.
Microlins Informtica
Front Page
Imagens mapeadas
As imagens utilizadas como links em pgina da Internet podem estar associadas a mais de um
endereo. As imagens que utilizam este recurso so chamadas de imagens mapeadas, pois elas so divididas em uma ou mais reas que, ao serem clicadas, direcionam o navegador para outra pgina.
O primeiro passo inserir a imagem, utilizando uma das maneiras mencionadas acima. A seguir,
clique no menu Exibir/Barra de ferramentas/Imagens. A barra abaixo ser mostrada:
Front Page
Formatando a pgina
Clique no menu Arquivo/Propriedades ou clique com o boto direito do mouse em qualquer lugar
da pgina e em seguida na opo Propriedades da pgina. A caixa abaixo ser aberta:
Guia Geral
Ttulo - Digite o ttulo da pgina. O ttulo
aparece na barra de ttulo de um navegador da Web.
Descrio da pgina - Digite uma breve descrio da pgina da Web. Os visitantes do site vero essa descrio nos resultados da pesquisa de um site de busca.
Guia Formatao
Imagem de plano de fundo - Adiciona
uma imagem ao plano de fundo da pgina.
Se a imagem no tiver a largura e o comprimento da pgina, ele ser repetido no
plano de fundo da pgina e rolar com o
contedo da pgina.
Marca d'gua - Adiciona uma imagem
ao plano de fundo da pgina da Web como
uma marca d'gua.
Plano de Fundo - Altera a cor de plano
de fundo da pgina. Clique na cor desejada
na caixa Plano de Fundo.
Texto - Altera a cor padro do texto na pgina. Clique na cor desejada na caixa Texto.
Hiperlink - Altera a cor do texto dos hiperlinks ainda no visitados. Clique na cor desejada na caixa Hiperlink.
Hiperlink visitado - Altera a cor do texto dos hiperlinks j clicados por um visitante do site. Clique
na cor desejada na caixa Hiperlink visitado.
Hiperlink ativo - Altera a cor do texto de um hiperlink quando um visitante do site clica nele. Clique na cor desejada na caixa Hiperlink ativo.
Confirme com OK para visualizar as modificaes feitas.
Frames
Frames so quadros que permite ao usurio acessar a pgina de maneira rpida, direta e intuitiva.
Uma pgina com frames dividida em uma ou mais reas que ocupam a janela do navegador e
cada quadro apresenta um documento diferente. Ao clicar em um link localizado em um frame, a pgina
pode ser carregada em qualquer um dos frames exibidos pelo navegador.
Para criar uma pgina com frames, clique no menu Arquivo/Novo. No Painel de Tarefas (do lado
direito da tela) clique na opo Mais modelos e pgina. A caixa abaixo se abrir:
Na guia Pginas de quadros, escolha
uma opo.
Escolha uma opo chamada Contedo.
Microlins Informtica
Front Page
Observe que essa pgina composta de dois frames no formato de coluna; o primeiro representado pela coluna estreita localizada do lado esquerdo da pgina e a segunda representado pela parte
maior da pgina.
A coluna da esquerda
deve conter links que possibilitem a
navegao do usurio pelo site. As
pginas associadas aos links na
coluna da esquerda sero exibidas
na coluna da direita.
Cada frame possui os
botes Definir Pgina Inicial e Nova Pgina.
O boto Definir Pgina
Inicial deve ser usado quando a
pgina a ser exibida j existe. O
boto Nova Pgina permite que
criemos uma pgina que ser exibida no frame atual.
Clique no boto Salvar
para que possamos salvar o
novo site e todos os arquivos correspondente.
O primeiro receber o nome de index. Perceba pela figura abaixo que somente um retngulo que
rodeia a pgina ser salvo. Ele recebe o arquivo de configuraes, que faz com que o navegador entenda
que o site ser dividido em duas
partes e deve receber o nome indicado.
Aps salvar o arquivo index, clique no boto Nova Pgina de
cada uma das divises apresentadas
na tela e clique novamente em salvar.
Front Page
10
Alinhamento: Centralizado;
Cor: Vermelho.
Salve a pgina novamente.
Selecione o texto PGINA 1, do lado esquerdo e clique sobre o boto Inserir Hiperlink
caixa Endereo, digite pgina1.htm.
Clique sobre o boto Novo . Salve a pgina como pagina2.htm.
Formate da seguinte forma:
Fonte: Arial Black;
Tamanho: 80 (clique sobre o nmero e digite o valor);
Alinhamento: Centralizado;
Cor: Azul.
. Na
Selecione o texto PGINA 2, do lado esquerdo e clique sobre o boto Inserir Hiperlink
caixa Endereo, digite pgina2.htm.
Salve todos os arquivos. Use a opo Salvar tudo no menu Arquivo.
. Na
tamente.
Contador de Visita
Um contador de visitas incrementado em uma unidade cada vez que um usurio visita a pgina.
Para inserir um contador de visitas em seu site, iniciaremos com uma nova pgina.
Clique no menu Inserir/Componente da Web. Clique na opo Contador de Visita. A caixa abaixo
ser aberta.
Escolha o estilo do contador e clique em
Concluir. Uma nova caixa ser aberta, com algumas
novas opes, entre elas:
Redefinir o contador para: indica a numerao do site e possibilita a mudana do nmero que
ser apresentado na pgina inicial do nosso site.
Nmero fixo de Dgitos: Representa o nmero mximo de dgitos que o contador assumir dentro
da pgina.
Clique no boto OK para confirmar. Esse recurso somente funcionar se o servidor Web escolhido
tiver as extenses do Front Page instaladas. A nica
forma de testar seu funcionamento publicando a pgina.
Microlins Informtica
Front Page
11
Letreiro digital
O Letreiro digital um componente do Front Page para criar uma aparncia para o usurio que
acessa o site.
Para inserir, posicione o cursor no local desejado e clique no menu Inserir/Componentes da web.
Em Efeitos Dinmicos, escolha a opo Letreiro Digital e clique em concluir. A caixa abaixo ser aberta:
Em Texto, digite o nome ou frase desejada. Este
texto deslizar pela tela no sentido definido pelo designer,
atravs das opes Esquerda e Direita.
Voc pode tambm definir outros itens, como velocidade, comportamento, etc.
Em Cor do plano de fundo, escolha a mesma cor
do fundo da pgina onde ser inserido o letreiro. Confirme
com OK.
Para exibir a caixa de Propriedades novamente,
clique duas vezes sobre o letreiro inserido.
Para formatar o letreiro com respeito fonte,
Tamanho e cor, clique uma vez sobre o ele e utilize a barra
de formatao. Salve o documento e teste a pgina.
Efeitos DHTML
Os efeitos de HTML dinmicos permitem que voc adquira efeitos incrveis em sua pgina de
forma rpida e simples. Por exemplo, imagine que ao visualizar sua pgina, o usurio ao mover o mouse
sobre determinados textos, estes se modifiquem automaticamente, mostrando outras fontes, cores, formatos, etc.
Esse recurso pode ser facilmente obtido clicando no menu Exibir/Barra de ferramentas/Efeitos
DHTML. Uma nova barra de ferramentas ser exibida, como mostra abaixo:
A primeira ferramenta corresponde ao momento em que os efeitos sero apresentados. So essas as opes:
- Carregar pgina: O efeito ser apresentado no momento em que a pgina for aberta;
- Clicar: O efeito ser apresentado no momento em que se clicar sobre o texto uma vez;
- Clicar duas vezes: O efeito ser apresentado no momento em que se clicar duas vezes sobre o
texto;
- Passar o mouse: O efeito ser apresentado no momento em que se passar o mouse sobre o
texto, sendo essa a opo mais usada.
Para inserir um efeito DHTML, selecione o texto desejado. Escolha o evento Passar o mouse.
Em Aplicar, escolha Formatao. Na caixa de efeito, escolha Fonte.
Mude a fonte como desejado, estilo, tamanho e efeitos. Confirme com OK. Teste a pgina para
visualizar o efeito.
Para remover os efeitos, selecione o texto, com efeito, DHTML e clique no boto
.
Adicionando um filme do Flash
Para inserir um filme do Flash, clique no menu Inserir/Componente da Web. Na caixa que se abre,
clique em Controles Avanados, do lado esquerdo. Na tela da direita, clique em Plug-in, como mostrado
abaixo:
Clique em Concluir. Uma nova caixa ser aberta. Clique no boto Procurar e navegue
pelas pastas at encontrar o arquivo de filme do
Flash. Selecione-o e clique no boto Abrir.
Pronto, o arquivo de filme do Flash foi
inserido na sua pgina.
Microlins Informtica
Front Page
12
Preencha
a primeira etapa, Dados Tcnicos, com o nome do site, o tipo de
domnio, a descrio, categoria, etc. Uma ateno especial para os
campos Nome do Usurio e Senha.
Selecione a caixa Concordo com os Termos de Servio
do Criandosite.
Em seguida, clique no boto Prosseguir.
Preencha as outras duas etapas, Dados Pessoais e Dados
Adicionais.
Microlins Informtica
Front Page
13
Ao terminar de criar o cadastro, selecione o domnio que deseja gerenciar e em seguida clique na
opo Enviar Arquivos.
Clique no boto Procurar e navegue pelas pastas at encontrar seu
arquivo com extenso Front Page. O
arquivo deve ter no mximo 300 KB
(kilobytes). Clique no boto abaixo, Enviar Arquivos.
Voc pode enviar at 5 arquivos por vez. Caso seu site tenha mais de
5 arquivos, clique na opo Enviar Arquivos novamente para enviar os arquivos
restantes.
Para visualizar os arquivos enviados, clique na opo Lista de Arquivos, localizado logo acima.
Aps enviar todos os arquivos,
acesse a Internet, entre com o endereo
de seu site para testar. Pronto, seu site j est no ar. Agora voc s precisa divulg-lo a outras pessoas.
Microlins Informtica