ÍNDICE

 

Ø     Introdução

Ø     Menu do FrontPage 2000

Ø     Ferramentas do FrontPage 2000

Ø     Tutorial de HTML

Ø     Como criar um  Site

Ø     Tabela de Cores

Ø     Listas

Ø     Links

Ø     Imagens

Ø     Tabelas

Ø     Frames

Ø     Componentes do FrontPage 2000
Como instalar as extensões do FrontPage 2000
Componente 1 - Contador de Acessos
Componente 2 - Campo de Confirmação
Componente 3 - Página de Inclusão
Componente 4 - Formulário de Pesquisa

Ø     Formulários

Ø     JavaScript

Ø     Java

Ø     Banco de Dados

Ø      DHTML

Ø     CSS 2.0 - Cascading Style Sheets 2.0 - Folha de Estilo

Ø     Música

Ø     Temas do FrontPage 2000

Ø     Publicação de Site na Internet

Ø      Divulgação em Sites de Busca

Ø     Dicas Finais


MENU

 

File – Arquivo

New – Novo
Page - Página - criar nova página
Web -  Web  - criar novo site
Folder - Pasta - criar nova pasta
Task – Tarefa - criar anotações sobre tarefas pendentes
Open – Abrir - abrir página

Close – Fechar - fechar página

Open Web – Abrir Web - abrir site

Close Web - Fechar Web - fechar site

Save – Salvar - Salvar arquivo

Save As - Salvar Como - salvar arquivo como

Publish Web - Publicar Web - publicar site na Internet

Import – Importar - importar site , páginas e imagens

Preview in Browser - Visualizar no Navegador - visualizar página no navegador

Page Setup - Configuração da Página - ajuste da página para impressão

Print Preview - Visualizar Impressão - previsão da impressão da página

Print – Imprimir - imprimir página

Send – Enviar - enviar página via email

Properties – Propriedades - propriedades da página

Recent Files - Arquivos Recentes

abrir lista dos arquivos mais recentes que esteja trabalhando

Recents Web – Webs Recentes - exibir lista de sites recentes

Exit – Sair

 

 

Edit - Editar

Undo – Desfazer - desfazer última ação

Redo – Refazer - refazer novamente para última ação

Cut – Recortar - recortar página

Copy – Copiar - copiar página

Paste – Colar - colar página

Paste Special - Colar Especial - colar especial

Delete – Excluir

Select All - Selecionar Tudo

Find – Localizar - localizar determinada palavra na página

Replace – Substituir - substituir palavra localizada por outra

Check Out

Check In

Undo Check Out - Desfazer Check out

Task - Tarefa

exibir lista de tarefas Pendentes:
Add Task - Adicionar Tarefa
Start - Iniciar anotações de tarefas pendentes
Marked as Completed – Marcar como concluída
Show History - Mostrar Histórico

 

 

View - Exibir

Page – Página - exibir página

Folders – Pastas - exibir pastas

Reports – Relatórios - exibir relatórios

Site Summary - Resumo do Site
All Files – Todos Arquivos
Recently Added Files – Arquivos recentemente adicionados
Recently Changed Files - Arquivos recentemente modificados
Older Files – Arquivos mais Antigos
Unlinked Files – Arquivos Desvinculados - exibir arquivos sem links
Slow Pages - Páginas Lentas
Broken Hyperlinks – Hyperlinks Desfeitos
Component Errors - Erros dos componentes do FrontPage 2000
Review Status – Status de Revisão
Assigned to – Atribuido à - exibir dados para assinar o nome do autor
Categories -  Categorias - exibir categorias
Publish Status - Status da Publicação
Check Out Status
- Status do Check Out

Navigation – Navegação - exibir barras de navegação

Hyperlinks – Hyperlinks - exibir links

Tasks – Tarefas - exibir lista de tarefas pendentes

View Bars - Barras de Modo de Exibição - exibir ou não barras de modo de exibição

Folder List - Lista das Pastas - exibir ou não lista das pastas

Reveal Tags – Revelar Marcadores - exibir tags

Toolbars – Ferramentas

exibir ou não as ferramentas :
Stantard – Padrão - ferramentas básicas
Formating – Formatação - ferramentas de formatação
DHTML Effects – Efeitos de DHTML - ferramentas de Efeitos de DHTML
Navigation – Navegação - ferramentas de navegação
Pictures – Figuras - ferramentas para imagens
Positioning -  Posicionamento - ferramentas para posicionamento
Reporting – Relatório - ferramenta para relatório
Style -  Estilo - ferramenta sobre CSS - Folha de Estilo
Tables -  Tabela - ferramentas para Tabelas
Customize - Personalizar

Refresh – Atualizar - atualizar dados da página

 

Insert - Inserir

 

Break - Quebra de Linha

inserir quebra de linha <br> ; atalho Shift + Enter

Horizontal Line - Linha Horizontal

inserir linha horizontal <hr>

Date and Time - Data e Hora

houve modificação na página, que será automaticamente atualizada à cada vez que for modificada e salva a página

Symbol – Símbolo - inserir símbolo

Comment – Comentários - inserir comentários

Navigation Bar - Barra de Navegação - inserir barra de navegação

Page Banner – Faixa de Página - inserir página com banner

Component – Componentes - inserir os componentes do FrontPage 2000:
Office SpreadSheet - inserir planilha do Excel
Banner Add Manager – Letreiro Digital - inserir banner do frontpage 2000
Hit Counter – Contador de Acesso - inserir contador
Hover Button – Botão em Foco - inserir botão hover do frontpage 2000
Marque – Letreiro Rolante - inserir <marque> texto rolante que só funciona no Internet Explorer
Confirmation Field – Campo de Confirmação para Formulário
Include Page – Incluir Página - inserir página dentro de outra página
Scheduled Picture – Imagem Programada
Scheduled Include Page – Incluir Página Programada
Substitution - Substituição
Categories
- Categorias
Search Form
- Formulário de Pesquisa
Tables of Contents – Índice Analítico
Additional Components - Adicionar Componentes

Database - Banco de Dados

inserir Banco de Dados :
Results -  Resultados - inserir dados
Columm Value -  Valor da Coluna - inserir valor à coluna

Form – Formulário - inserir formulário
One-line Textbox – Caixa de Texto de uma Linha
Scrolling Textbox – Caixa de Texto de Rolagem
Checkbox – Caixa de Seleção
Radio Buttom – Botão de Seleção
DropDown Menu – Menu Suspenso
Push Button – Botão de Ação - inserir botão enviar / limpar
Picture – Figura - inserir imagem
Label – Rótulo - inserir rótulo
Form Properties - Propriedades do Formulário

Advanced – Avançado

inserir recursos avançados

HTML – HTML - inserir tag
Design Time Control – Controle em Tempo de Criação
Java Applet – Multiplicativo Java - inserir applet em java
Plug-in - inserir som, usando o comando <embed>
Active X Control – Controle Active X
Show Design Time Control – Mostrar Controle em Tempo de Criação

Picture – Figura  - inserir imagem
Clip Art - inserir imagem do clip art do FrontPage 2000
From File -  Do Arquivo - inserir imagem de algum arquivo
Vídeo - inserir vídeo

File – Arquivo - inserir arquivo

Bookmark – Indicador - inserir destino para o link no mesmo documento

Hyperlink – Hyperlink - inserir link

 

 

Format – Formatar

Font – Fonte -modificar fonte

Paragraph – Parágrafo - modificar parágrafo

Bullets and Numbering – Marcadores e Numeração - inserir lista com marcadores e numerada

Borders and Shading – Bordas e Sombreamento

Position – Posição - inserir posicionamento de elemento

Dynamic HTML Effects - Efeitos de DHTML - inserir efeitos de DHTML

Style – Estilo - Folha de Estilos - formatar em CSS

Style Sheet Links - Links da Folha de Estilos - formatar links em CSS

Theme – Tema - inserir tema do FrontPage 2000

Shared Borders – Bordas Compartilhadas - inserir bordas

Page Transition - Página de Transição

Remove Formatting - Remover Formatação

Properties – Propriedades - exibir propriedades

 

Tools - Ferramentas

Speeling – Ortografia - corrigir palavras que estejam com erros ortográficos

Thresaures – Dicionário de Sinônimos

Recalculate Hyperlinks – Recalcular Hyperlink - redefinir link

Security - Segurança

Macro - Macro
Visual Basic Editor - abrir o editor do Visual Basic
Microsoft Script Editor - abrir editor de  JavaScript

Add-Ins – Suplementos

Customize - Personalizar

Web Settings – Configurações da Web

Options - Opções

Page Options - Opções da Página

 

 

Tables - Tabelas

Draw Table - Desenhar Tabela - desenhar tabela à mão livre

Insert – Inserir

Table – Tabela - inserir tabela
Rows and Columns – Linhas e Colunas - inserir linhas e colunas
Cell – Células - inserir célula
Caption - inserir legenda da tabela ( título )

Delete Cells - Excluir Célula -

Select – Selecionar

Table - selecionar tabela
Column - selecionar coluna
Row - selecionar linha
Cell - selecionar célula

Merge Cells - Mesclar Células

transformar células selecionadas em uma célula

Split Cells - Dividir Células

dividir células em linhas e colunas

Distribute Rows Evently - Distribuir Linhas Igualmente

Distribute Columns Evently - Distribuir Colunas Igualmente

Auto-Fit – Auto-Ajustar

Convert – Converter

Text to Table – Texto para Tabela - converter texto para tabela
Table to Text – Tabela para Texto - converter tabela para texto

Properties – Propriedades

Table - propriedades da tabela
Cells - propriedade da célula

Frames - Quadros

Split Frame - Dividir Quadro

Delete Frame – Excluir Quadro

Open Page in New Window – Abrir Página em Nova Janela - visualizar quadro na tela toda

Save Page – Salvar - salvar página

Save Page As - Salvar Como - salvar página como

Frame Properties - Propriedades do Quadro

 

 

Window - Janela

determina quais são as páginas que estão abertas no FrontPage 2000

New Window - Nova Janela

abrir nova janela

 

 

Help - Ajuda

Microsoft FrontPage Help - Ajuda sobre FrontPage 2000

What's this ? - O que é isto ?

Office on the Web - Sobre Office 2000 no site da Microsoft

Detect and Repair - Detectar e Corrigir

About Microsoft FrontPage - Sobre FrontPage 2000

 


FERRAMENTAS

New Page – Nova Página - criar nova página

Page – Página -  criar nova página
Web -  Web - criar novo site
Folder -  Pasta - criar nova pasta
Task – Tarefa - criar nova anotação ( tarefas pendentes )

 

Open -  Abrir - abrir página

Page – Página - abrir página

Web – Web - abrir site

 

Save - Salvar página           

Publish Web - Publicar Web

      

Folder List - Exibir ou não Lista de Pastas

 

Print - Imprimir página

 

Preview in Browser –visualizar página  no navegador

       

Spelling - Ortografia

 

 Cut - Recortar
      
Copy - Copiar

 

 Paste - Colar

 

 Format Painter – Pincel

Undo – Desfazer - voltar para última ação

 

 Redo -  Refazer - refazer próxima ação

       

Insert Component - Inserir Componente

       

Insert Table - Inserir Tabela

Insert Picture From File - Inserir Figura do Arquivo

       

Hyperlink – Hyperlink - criar Link

Refresh - Atualizar

 

Stop - Parar

Show All – Mostrar Tudo - exibir todos os Parágrafos  

 
Microsoft FrontPage Help - ajuda do FrontPage

 

clicando na seta :
More Buttons -  Mais Botões - Adicionar ou Remover Botões

 

Style – Estilo - inserir alguns tags

Formatted – Formatado <pre>
Address – Endereço <address>
Heading 1 – Título 1 <h1> até Heading 6  - Título 6 <h6>
Numbered List – Lista Numerada <ol>
Bulleted List – Lista com Marcadores <ul>
Directory List  - Lista de Diretório <dir>
Menu List – Lista de Menus <menu>
Defined Term – Termo Definido <dl>
Definition – Definição <dd>

 

Font – Fonte - tipo de fonte

                 

Font Size - Tamanho da Fonte

       

Bold - Negrito

      

Italic - Itálico

       

Underline - Sublinhado

 

Align Left - Alinhar à Esquerda

       

Align Center - Centralizar

      

Align Right - Alinhar à Direita

       

Numbering – Numeração - inserir lista numerada

       

Bullets – Marcadores - inserir lista não-numerada

       

Decrease Indent - Diminuir Recuo <blockquote>

 

Increase Indent - Aumentar Recuo <blockquote>

 

Highlight Color – Realçar Texto - inserir cor de fundo atrás do texto

 

Font Color  – Cor da Fonte -  modificar cor da fonte

 

Add or Remove Buttons - Adicionar ou Remover Botões

 

VIEWS – MODOS

Page - Páginas - exibe as Páginas do Site

Folders List - Lista de Pastas - exibir ou não Lista de Pastas do Site

Folders - Pasta - exibe as Pastas do Site

Reports - Relatórios - exibe relatórios sobre o Site

Navigation - Navegação - exibe Organograma do Site ( opcional )

Hyperlinks - Hyperlinks - exibe lista de links da cada página selecionada

Tasks - Tarefas - exibe as anotações de tarefas pendentes

 

COMO CRIAR UM SITE NO FRONTPAGE 2000

 

EXERCÍCIO 1 – CRIAR SITE

 

1.    Arquivo > Novo > Web
Tipos de Site :
 Geral - vários tipos de sites
 Páginas de Quadros - vários tipos de sites com frames
 Folha de Estilos - vários tipos de sites com Folha de Estilos

2.    Selecione  Página Normal

3.    Observe que no lado direito : Options ( Opções )
http://nome_da_máquina /site , vamos criar um site chamado curso
http://nome_da_máquina/curso . OK

4.    No Windows 98 , o site será armazenado :
C:\Inetpub\wwwroot\Curso ou
 Meus Documentos > Meus Sites

5.    Será criada automaticamente a página principal : default.htm ou index.htm

6.    Arquivo > Novo > Página

7.    Arquivo > Salvar Como

8.    Salvar como exer1.htm

9.    Clique dentro da página com o botão direito do mouse, Propriedades.

Geral> Título,  digite: Exercício 1
Plano de Fundo> Cores>
 Plano de Fundo> e escolha uma cor para o fundo da página ;
Margens  - deixar como está

10.          Personalizar -para inserir comandos que especificam dados sobre a página ;
clique em Adicionar  na parte de baixo e digite :
Nome: Author ; Value ( Valor ) : seu nome
clique em Adicionar  na parte de baixo e digite :
 Nome: Description ; Value ( Valor ) : mailto:microman@phoenixline.com.br ; digite seu email
clique em Adicionar  na parte de baixo e digite:  Nome: Description ; Valor: digite uma descrição sobre a página, neste exemplo , página sobre comandos básicos de html OK

11.          Idioma: Escolha o Português do Brasil

12.          Grupo de Trabalho
 Categorias Disponíveis - especificar tipo de categ. do site
 Atribuído à
 Status de Revisão

13.          Clique em Estilo  > Heading 1  ( Título 1 )

14.          Centralize o texto

15.          Minha Primeira Página ( e pinte de uma cor )

16.          Inserir > Linha Horizontal)

17.          Selecione a linha horizontal e com o botão direito do mouse:Propriedades
 largura: 90% ; cor: este comando dá cor a linha horizontal, e ele só é aceito no Internet Explorer

18.          Digite o texto : Hipertexto possibilita ligar uma palavra ou um trecho de texto com outras partes desse ou de outros documentos; esta ligação é chamada link de hypertexto ou simplesmente link.
( dê um Shift + Enter para criar uma quebra de linha )
Ao dar um clique em um link, o programa HTML irá se encarregar de desviar sua leitura para um novo trecho do documento.
( dê Enter para criar novo parágrafo )

Hipermídia possui basicamente o mesmo conceito de hipertexto só que se refere a várias formas de mídia como : sons, imagens , slides, cinema, inclusive textos. Isso significa que uma imagem pode estar relacionada a um texto como a uma imagem maior ou a uma música.

19.          Inserir > Linha Horizontal

20.          Selecione o texto e clique em para alinhar à esquerda

21.          Clique no rodapé HTML

22.          Em <p align="left"> troque para <p align="justify"> para justificar o texto

23.          Clique no rodapé Normal

24.          Selecione a texto novamente e clique em  Aumentar Recuo para fazer um recuo ( blockquote )

25.          Mantendo o texto selecionado > botão direito do mouse >Propriedades :
 Fonte: verdana, arial ou  helvetica, Tamanho: 2 ( 10pt )
caso o usuário não tenha a primeira fonte no seu computador, ele visualizará a página com a segunda fonte, ou a terceira e caso não tenha nenhuma das três fontes, por default em HTML ele visualizará o Times Roman

26.          Clique abaixo da linha horizontal

27.          Digite centralizado : Seu Nome :
 Inserir > Símbolo > e escolha © ; 1999 ; ficando assim: Seu Nome © 1999 ; Selecione este texto e coloque as fontes : verdana,arial,helvetica , 1 ( 8pt ) e em negrito

28.          Clique no disquete para salvar sua página

29.          Clique em Visualizar no Navegador

 

EXERCÍCIO 2 – LISTAS

1.    Arquivo > Abrir Web e abra seu site

2.    Arquivo > Novo > Página

3.    Arquivo > Salvar Como

4.    Salvar como exer2.htm na pasta onde você salvou o exer1.htm

5.    Clique dentro da página com o botão direito do mouse > Page Properties
 Propriedades da Página

6.    Geral > Título e  digite : Exercício 2
 Plano de Fundo > Cores  >
 Plano de Fundo  e escolha uma cor para o fundo da página , caso queira outra cor , clique em Custom Colors e escolha uma cor
 Margens  - deixar como está

7.    Personalizar - para inserir comandos metas que especificam dados sobre a página ;
clique em Adicionar  na parte de baixo e digite :
Nome : Author ; Valor: seu nome
clique em Adicionar na parte de baixo e digite :
Nome : Description ; Value ( Valor ) : mailto:microman@phoenixline.com.br ; digite seu email
clique em Adicionar na parte de baixo e digite :
Nome: Description ; Value ( Valor ) : digite uma descrição sobre a página, neste exemplo , página sobre listas. OK

8.    Idioma  e escolha o Português do Brasil ( opcional )

9.    Grupo de Trabalho
 Categorias Disponíveis - especificar tipo de categoria do site
 Atribuído à - site feito por
 Status da Revisão

10.          Clique em Estilo> Título 1

11.          Centralize o texto

12.          Tipos de Listas ( e pinte de uma cor )

13.          Inserir > Linha Horizontal

14.          Selecione a linha horizontal e com o botão direito do mouse, Propriedades largura: 90% ; cor: este comando dá cor a linha horizontal, e ele só é aceito no Internet Explorer

15.          Digite : Os principais times de futebol do Rio são :

16.          Clique no ícone Lista Numerada e digite Flamengo
Dê enter : Vasco , mesmo procedimento e digite Botafogo e Fluminense

17.          Dê <enter> duas vezes para desativar o comando de lista

18.          Digite : Os principais times de futebol de São Paulo são :

19.          Clique no ícone Lista com Marcadores  e digite Corínthians
Dê <enter> : São Paulo , mesmo procedimento e digite Santos e Ponte Preta 

20.          Digite : Os principais times de futebol do Rio Grande do Sul são :

21.          Clique em Lista Numerada  e digite Grêmio
Dê enter : Internacional , mesmo procedimento e digite Juventude

22.          Selecione a lista dos times do RS > botão direito do Mouse, Propriedades Números: escolha a lista com números romanos
Marcadores  Simples
Figuras como Marcadores , que falaremos sobre este tipo de marcador no capítulo sobre Imagens
Conclusão : para inserir uma lista especial , primeiramente se cria uma lista numerada e depois muda o tipo de lista através das propriedades da lista

23.          Selecione os textos : Os principais times de futebol de Rio até Juventude
Botão direito do mouse > Fonte  > digite : verdana,arial,helvetica e 2 ( 10pt )

24.          Inserir > Linha Horizontal  ( observe que ela manteve os 90% de largura )

25.          Digite centralizado : Seu Nome
Inserir > Símbolo > e escolha © ; 1999 ; ficando assim
Seu Nome © 1999 ;
Selecione este texto e coloque as fontes : verdana,arial,helvetica , 1 ( 8pt ) e em negrito

26.          Clique no disquete para salvar sua página

27.          Clique em  Visualizar no Navegador

 

LINKS

 

Os links são criados através da tag <a href= ..> ...</a>

 

Links para uma página

 

<html>
<head>
<title>Título da Página</title>
</head>
<body>
<p>
<a href="exer1.htm">Ir para o Exercício 1</a>
</p>
</body>
</html>

 

Link para um Site

 

<html>
<head>
<title>Título da Página</title>
</head>
<body>
<p>
<a href="http://www.disney.com">Disney</a>
</p>
</body>
</html>

 

Link para email

 

<html>
<head>
<title>Título da Página</title>
</head>
<body>
<p>
<a href=" mailto:nome@provedor.com.br">Contato</a>
</p>
</body>
</html>

 

 

 

 

Link para uma seção dentro da própria página

 

<html>
<head>
<title>Título da Página</title>
</head>
<body>
<p>
<p><a href="#Clientes">Clientes</a></p>
..............
<a name="Clientes"></a>
</p>
</body>
</html>

 

Ø     Determina para onde irá o link <a name="..."></a>

Ø     Determina o link propriamente dito <a href="# ..> Link </a>

 

 

Observação : quando usamos o FrontPage e digitamos numa página um endereço de um site qualquer e damos espaço, ele criará automaticamente o link ; o mesmo acontece quando digitamos um email e damos espaço ele criará automaticamente o link mailto

 

EXERCÍCIO 3 - LINKS

 

1.    Abrir > Abrir Web e abra seu site

2.    Arquivo > Novo > Página

3.    Arquivo > Salvar Como

4.    Salvar como exer3.htm na pasta onde você salvou o exer1.htm

5.    Clique dentro da página com o botão direito do mouse > Page Properties
Propriedades da Página

6.    General ( Geral ) > Title ( Título ) digite : Exercício 3
Background ( Plano de Fundo ) > Colors ( Cores ) >
Background ( Plano de Fundo ) e escolha uma cor para o fundo da página , caso queira outra cor , clique em Custom Colors ( Personalizar ) e escolha uma cor
 Margens - deixar como está

7.    Personalizar - para inserir comandos metas que especificam dados sobre a página ;
clique em Adicionar  na parte de baixo e digite :
Nome : Author ; Value ( Valor ) : seu nome
clique em Adicionar na parte de baixo e digite :
Nome : Description ; Valor: mailto:microman@phoenixline.com.br ; digite seu email
clique em Adicionar  na parte de baixo e digite :
 Nome: Description ; Valor: digite uma descrição sobre a página, neste exemplo , página sobre listas. OK

8.    Idioma  e escolha o Português do Brasil ( Opcional )

9.    Grupo de Trabalho ( Opcional )
 Categorias Disponíveis - especificar tipo de categoria do site
 Atribuído à - site feito por
Review Status 

10.          Clique em Estilo >  Título 1

11.          Centralize o texto

12.          Digite: Links ( e pinte de uma cor  )

13.          Inserir > Linha Horizontal

14.          Selecione a linha horizontal e com o botão direito do mouse :
 Propriedades da Linha Horizontal
 largura ) : 90% ; color ( cor ) : este comando dá cor a linha horizontal, e ele só é aceito no Internet Explorer

15.          Digite : Link para uma seção nesta página : Sites de Busca
Dê <enter>

16.          Digite : Link para um site : http://www.cade.com.br ( dê um espaço ) ou digite Cade
Dê <enter>

17.          Digite : Link para email : microman@phoenixline.com.br ( dê um espaço ) ou Contato.  <enter>

18.          Digite : Link para uma página :Exercício 2
Dê <enter>

19.          Digite : Um mecanismo de busca encarregado de encontrar sites para quem trabalha com HTML, sites de animação, TV e cinema, enfim, tudo ligado a área gráfica, é justamente fazer uma filtragem para ajudar o profissional que faz uso da rede a acessar rapidamente as informações desejadas, apresentadas em categorias e subcategorias de uma determinada área.

20.          Selecione o texto e clique
Clique com rodapé HTML
em <p align="left"> mude para <p align="justify"> para justificar o texto, que só visulizado no browser com versão 4.0 ou superior

21.          Digite : É difícil fazer com que corresponda às expectativas de um internauta cada vez mais exigente e ao mesmo tempo enfrentar a concorrência dos sites de busca que proliferam na rede em progressão geométrica.

22.          Repita o mesmo procedimento mencionado no item 20

23.          Digite : Os mecanismos de busca permitem a pesquisa por uma frase ou por uma combinação de palavras. Para achar o site que contenha uma frase, digite-a entre aspas.

24.          Repita o mesmo procedimento mencionado no item 20

25.          Digite : Sites de Busca e pinte de uma cor
dê <enter>

26.          Digite : Cade
dê <enter> Radaruol , Zeek e Surf respectivamente

27.          Selecione os textos : Link para uma seção ... até Surf
Botão direito do mouse > Font  ( Fonte ) > digite : verdana,arial,helvetica e 2 ( 10pt )

28.          Inserir > Linha Horizontal  ( observe que ela manteve os 90% de largura )

29.          Digite centralizado : Seu Nome :
 Inserir > Símbolo > e escolha © ; 1999 ; ficando assim
Seu Nome © 1999 ;
Selecione este texto e coloque as fontes : verdana,arial,helvetica , 1 ( 8pt ) e em negrito

30.          Selecione a palavra Cade > ferramenta Hyperlink ( Mundo de óculos )

31.          URL digite : http://www.cade.com.br

32.          Selecione a palavra Contato > ferramenta Hyperlink ( Mundo de óculos )
Clique no ícone do envelope amarelo e digite seu email : nome@provedor.com.br

33.          Clique antes do texto Sites de Busca ( o que está no final da página )

34.          Insert > Bookmark
Inserir > Indicador e digite : sites

35.          Selecione o texto : Sites de Busca ( o que está no início da página ) Hyperlink
( Mundo de óculos )

36.          Clique na ferramenta Hyperlink ( Mundo de óculos ) > na parte inferior
 Opcional > Indicador e selecione sites

37.          Clique no disquete para salvar sua página

38.          Clique em Visualizar no Navegador

 

IMAGENS

 

O comando que permite colocar imagens em um documento HTML
<img src="nome_da_imagem.gif">

 

Ø     As extensões aceitas para imagens são : gif , jpg e png

 

Alinhamento de imagem

 

<img align="top" src="beto.gif"> alinhamento na parte de acima em relação ao texto

<img align="middle" src="beto.gif"> alinhamento no meio em relação ao texto

<img align="bottom" src="beto.gif"> alinhamento na parte de baixo em relação ao texto

 

Observações

Ø     Quanto maior for a imagem, tanto maior será o arquivo e mais tempo levará para que ela apareça na sua página

Ø     Use imagens em gif quando o número de cores não for grande ou se precisar de transparência ou animação

Ø     Use imagens em jpg quando o número de cores for grande e as variações de cor forem suaves, como em fotos, mapas, pinturas, etc.

Ø     Imagens em gif não há perda de qualidade para imagens planas e há economia de espaço no disco, enquanto que jpg há compressão de imagens. Todas as duas extensões tem Interlaced , que faz com que a imagem vai carregando aos poucos e vai se definindo

 

Exemplo :

 

<img align="top" src="cristo.gif" alt="Cristo Redentor"> o comando alt é um texto mostrado antes que a imagem comece a ser transferida, dando uma idéia do que irá aparecer naquele espaço e também serve, no caso do Netscape e no Internet Explorer versão 4.0 ou superior, quando o mouse passa sobre a imagem, aparece uma descrição da mesma, que foi mencionada no comando alt

 

Posicionamento das imagens

 

Ø     align="right" - a imagem fica alinhada a direita e o texto flui ao redor da imagem pela esquerda.

Ø     align="left" - a imagem fica alinhada à esquerda e o texto flui ao redor da imagem pela direita.

Ø     Aos usar os alinhamentos left e right, você poderá também adicionar a distância horizontal entre a figura e o texto ao redor (hspace) e a distância vertical entre a figura e as linhas anterior e posterior do texto ( vspace)

Ø     align="top" - alinha ao topo o texto . Se a altura da imagem for maior que a altura, aparece um espaço em branco abaixo da linha para compensar a diferença

Ø     align="middle" - alinha a linha-base do texto ; a linha imaginária que passa por baixo da maioria dos caracteres. Se a imagem for mais alta que o texto, um espaço extra será distribuído acima e abaixo do texto para compensar

Ø     align="bottom" - alinha a parte inferior da imagem com a linha-base do texto, colocando um espaço extra acima caso a imagem seja maior que o texto

 

Alinhamentos especiais

 

Ø     align="texttop" - o topo da imagem fica alinhado com o topo do texto mais alto da linha.

Ø     align="absmiddle" - alinha o ponto médio da altura da imagem com o ponto médio da altura da linha, também colocando espaços acima e abaixo do texto caso a imagem seja mais alta

Ø     align="baseline" - o mesmo que align="bottom"

Ø     align="absbottom" - alinha a parte da imagem com a parte inferior da linha atual, colocando um espaço extra acima do texto a imagem seja mais alta que ele

 

Tamanho da imagem

 

Ø     height - especifica a altura da imagem
width - especifica a largura da imagem

 

<html>
<head>
<title>Título da Página</title>
</head>
<body>
<p>
<img src="cristo.gif" alt="Cristo Redentor" width="150" height="100">
</p>
</body>
</html>

 

Bordas de imagem

 

Ø     border - especifica a borda , caso coloque o comando border="0" a imagem ficará sem borda

 

<html>
<head>
<title>Título da Página</title>
</head>
<body>
<p>
<img src="cristo.gif" alt="Cristo Redentor" width="150" height="100" boder="1">
</p>
</body>
</html>

 

Inserir arquivo de vídeo

 

Ø     dynsrc="arquivo_video.gif" - indica o arquivo de vídeo a ser carregado

Ø     img src ="imagem.gif" - deve ser colocado para que os browsers que não aceitam o comando dynsrc possam mostrar uma imagem

Ø     controls - determina botões para controlar a execução do arquivo de vídeo

Ø     loop =" n" ou "infinitive" - determina quantas vezes o arquivo de vídeo será executado

Ø     n é o número de vezes que o arquivo será executado

Ø     infinitive executa o arquivo indefinidamente

Ø     start = "fileopen" ou start="mouseover" - determina quando o arquivo de vídeo começará a ser executado

 

<html>
<head>
<title>Título da Página</title>
</head>
<body>
<p>
<img src ="imagem.gif" dynsrc= "arquivo_video.gif" loop="2" start="mouseover">
</p>
</body>
</html>

 

 

 

Como copiar uma imagem na Internet

 

Clique sobre a imagem com o botão direito do mouse e o browser dará uma opção Save Picture as ou Salvar Imagem Como ..., e assim você escolhe o diretório onde quer deixá-la e dê OK

 

IMAGEM MAPEADA

 

Uma imagem mapeada <map> é uma imagem onde definimos várias pontos da imagem conhecidas sensíveis ou hotspots , que quando clicadas agem como links levando para outra página ou URL.

 

<html>
<head>
<title>Título da Página</title>
</head>
<body>
<p><map name ="nome da imagem">
<area shape="rect" coords ="200,250", 300, 20" href="beto,htm">
<area shape="rect" coords ="150,100", 100, 120" href="cadastro.htm">
</map>
</p>
</body>
</html>

 

Ø     area shape - tamanho da área mapeada
coords - posição da imagem mapeada na página
href - link na imagem mapeada para uma determinada página

 

Como copiar uma imagem para FrontPage 2000

 

1.    Clique na ferramenta Insert Picture from File ( Inserir Figura do Arquivo )

2.    Abrirá uma Caixa de Diálogo : Picture  ( Figura ) e clique no ícone
Select a File on Your Computer

3.    Selecione um Arquivo no Seu Computador

4.    Procure a imagem no seu computador, selecione-a e clique OK

5.    Clique no ícone do disquete para salvar

6.    Abrirá uma Caixa de diálogo : Save Embbeded Files ( Salve Arquivos Inseridos ) com o nome da imagem ;

7.    Clique no botão Change Folder ( Mudar de Pasta ) , pois todas as imagens devem ser guardadas dentro da pasta images ( imagens ) que foi criada automaticamente pelo FrontPage quando você criou seu site

8.    Clique OK e o FrontPage faz uma cópia automaticamente para seu site

 

 

 

OUTRAS PROPRIEDADES DA IMAGEM NO FRONTPAGE 2000

 

Clique na imagem e observe que na parte de baixo da tela será exibido vários ícones sobre as propriedades da imagem

 

Ø     Insert Picture From File - Inserir Figura do Arquivo

 Text – Texto - inserir texto sobre a imagem

Auto-thumbnail  - Autominiatura

Ø     Position Absolutly - Posição Absoluta

Ø     Bring Forward – Avançar - trazer para frente

Ø     Send Back – Recuar - enviar para trás

Ø     Rotate - Girar a imagem p/ direita , esquerda , horizontal e vertical

Ø     More/Less Contrast - Mais/Menos Contraste
More/Less Brightness - Mais/Menos Brilho

Ø    

Crop - Cortar
Set Transparent Color – Definir Cor Transparente
Back and White -  Preto e Branco - transformar imagem em preto e branco
Wash Out – Desbotar - transformar imagem em cinza e branco
Bevel – Chanfrar - criar botão na imagem
Resample – Criar Novas Amostras – redimensionar

Ø    

Select - Selecionar imagem para transformá-la em imagem mapeada
Rectangular Hotspots – Área interativa em Forma Retangular - especifica área mapeada retangular
Circular Hotspots - Área interativa Circular - especifica área mapeada circular
Polygonal Hotspots - Área interativa em Forma  Poligonal - especifica área mapeada poligonal
Highlight Hotspots -  Realçar Área interativa - especifica área mapeada sem parte da imagem

Ø     Restore – Restaurar para forma original

 


EXERCÍCIO 4 – IMAGENS

 

1.    Arquivo > Abrir Web e abra seu site

2.    Arquivo > Novo > Página

3.    Arquivo > Salvar Como

4.    Salvar como exer4.htm na pasta onde você salvou o exer1.htm

5.    Clique dentro da página com o botão direito do mouse > Propriedades >  Título  digite : Exercício 4
 Plano de Fundo
Clique em Procurar  > Clique em Selecionar um arquivo no seu computador
e procure no seu computador uma imagem que será o fundo da página
Margens - deixar como está

6.    Personalizar - para inserir comandos metas que especificam dados sobre a página ;
clique em (Adicionar) na parte de baixo e digite :
Nome: Author ; Valor: seu nome
clique em Adicionar  na parte de baixo e digite :
 Nome  : Description ; Valor : mailto:microman@phoenixline.com.br digite seu email
clique em Adicionar  na parte de baixo e digite :
 Nome  : Description ; Valor : digite uma descrição sobre a página, neste exemplo , página sobre imagens OK

7.    Idioma  e escolha o Português do Brasil ( Opcional )

8.     Grupo de Trabalho ( Opcional )
 Categorias Disponíveis - especificar tipo de categoria do site
 Atribuído à - site feito por
 Status da Revisão

9.     Arquivo > Salvar

10.          Abrirá uma Caixa de diálogo : ( Salve Arquivos Inseridos ) com o nome da imagem ;

11.          Clique no botão Mudar de Pasta , pois todas as imagens devem ser guardadas dentro da pasta images/ ( imagens/ ) que foi criada automaticamente pelo FrontPage quando você criou o Site Curso

12.          Clique OK e o FrontPage faz uma cópia automaticamente para seu site

13.          Clique em Estilo>Título 1

14.          Centralize o texto

15.          Digite : IMAGENS ( e pinte de azul escuro )

16.          Inserir > Linha Horizontal

17.          Selecione a linha horizontal e com o botão direito do mouse:  Propriedades
 largura : 90% ; cor : este comando dá cor a linha horizontal, e ele só é aceito no Internet Explorer

18.          Inserir > Imagem
Clique em Selecionar um arquivo no seu computador
e procure no seu computador uma imagem

19.          Arquivo > Salvar

20.          Abrirá uma Caixa de diálogo : Salve Arquivos Inseridos, com o nome da imagem ;

21.          Observe , a imagem está dentro da pasta imagen que foi criada automaticamente pelo FrontPage quando você criou o Site Curso

22.          Clique OK e o FrontPage faz uma cópia automaticamente para seu site

23.          Clique sobre a imagem > botão direito do mouse >Propriedades
 Geral 
Texto   digite uma descrição da imagem ( comando alt ) no nosso caso : Praias
 Aparência 
 Alinhamento : meio ; Espessura da Borda : 1 ; hspacing : 20

24.          Digite ao lado direito da imagem : Imagem 1

25.          Inserir > Linha Horizontal

26.          Selecione a linha horizontal e com o botão direito do mouse,  Propriedades da Linha Horizontal
width ( largura ) : 90% ; color ( cor ) : este comando dá cor a linha horizontal, e ele só é aceito no Internet Explorer

27.          Digite : Lista com imagem como marcador: e  dê <enter>

28.          Clique no ícone  Numeração  e digite : Brasil <enter> Espanha
<enter> Japão

29.          Selecione a lista > botão direito do mouse Propriedades da Lista,
Browse Marcadores de Figuras  > Selecionar

30.          Clique em Selecionar um arquivo no seu computador
e procure no seu computador uma imagem como marcador

31.          Arquivo > Salvar

32.          Abrirá uma Caixa de diálogo: Save Embbeded Files ( Salve Arquivos Inseridos ) com o nome da imagem;

33.          Observe, a imagem está dentro da pasta images/ ( imagens/ ) que foi criada automaticamente pelo FrontPage Explorer quando você criou o Site Curso

34.          Dê dois <enter> para desativar a lista

35.          Insert > Horizontal Line  Inserir > Linha Horizontal

36.          Selecione a linha horizontal e com o botão direito do mouse :
Horizontal Line Properties  Propriedades da Linha Horizontal
width ( largura ): 90%; color ( cor ): este comando dá cor a linha horizontal, e ele só é aceito no Internet Explorer

37.          Clique em Style ( Estilo ) e selecione Heading 2  ( Título 2 )

38.          Digite: Imagem Mapeada ( pinte de zul escuro e centralizado )

39.          Insert > Image Inserir > Imagem
Clique em Select a file in your computor
Selecionar um arquivo no seu computador
e procure no seu computador uma imagem com textos conforme nosso exemplo

40.           File > Save  Arquivo > Salvar

41.          Abrirá uma Caixa de diálogo : Save Embbeded Files ( Salve Arquivos Inseridos ) com o nome da imagem ;

42.          Observe , a imagem está dentro da pasta images/ ( imagens/ ) que foi criada automaticamente pelo FrontPage Explorer quando você criou o Site Curso

43.          Clique sobre a imagem > botão direito do mouse > Picture Properties
Propriedades da Figura
General  ( Geral )
Text ( Texto )  digite uma descrição da imagem ( comando alt ) no nosso caso : Clique no site que queira visitar

44.          Selecione a imagem e observe que exibirá os ícones das propriedades da imagem na parte de baixo da tela > Rectangular Hotspot
Área Interativa de Forma Retangular

45.          Clique em rectangular hotspots ; no nosso exemplo : faça um retângulo em volta da palavra Disney
Abrirá uma Caixa de Diálogo : URL digite : http://www.disney.com

46.          Clique em Rectangular Hotspot:  Área Interativa de Forma Retangular
no nosso exemplo : faça um retângulo em volta da palavra Cadê
Abrirá uma Caixa de Diálogo : URL digite : http://www.cade.com.br

47.          Clique em Rectangular Hotspot: Área Interativa de Forma Retangular
no nosso exemplo : faça um retângulo em volta da palavra Canal Web
Abrirá uma Caixa de Diálogo : URL digite : http://www.canalweb.com.br

48.          Insert > Horizontal Line  Inserir > Linha Horizontal ( com 90% de largura )

49.          Insert > Image Inserir > Figura
Clique em Select a file in your computer Selecionar um arquivo no seu computador
e procure no seu computador uma imagem de envelope que será o link para um email

50.          File > Save  Arquivo > Salvar

51.          Observe que o FrontPage irá fazer uma cópia da imagem dentro da pasta images/
( imagens/ )

52.          Clique sobre a imagem e centralize

53.          Clique sobre a imagem > botão direito do mouse > Picture Properties
Propriedades da Figura
General  ( Geral )
Text  ( Texto ) digite uma descrição da imagem ( comando alt ) no nosso caso: Para entrar em contato clique aqui

54.          Selecione a imagem e clique na ferramenta Mundo de óculos

55.          Clique no envelope amarelo e digite seu email : nome@provedor.com.br

56.           Selecione Lista com imagem como marcador até Japão
botão direito do mouse > Font ( Fonte )
verdana,arial,helvetica ; 2 ( 10 pt )
Mantendo a seleção insira um recuo ( blockquote ) clicando em Increase Indent
Aumentar Recuo

57.          Digite centralizado : Seu Nome :
Insert > Symbol
Inserir > Símbolo > e escolha © ; 1999 ; ficando assim
Seu Nome © 1999 ;
Selecione este texto e coloque as fontes : verdana,arial,helvetica , 1 ( 8pt ) e em negrito

58.          Clique no disquete para salvar sua página

59.          Clique em Preview in Browser
Visualizar no Navegador

 

 

 

 

 

 


COMO CRIAR UMA TABELA NO FRONTPAGE 2000

 

 

Clique na ferramenta  Insert Table ( Inserir Tabela ) e arraste quantas linhas e colunas ou

Table > Insert > Table
Tabela > Inserir > Tabela

 

PROPRIEDADES DE UMA TABELA NO FRONTPAGE 2000

 

Clique sobre a tabela com o botão direito do mouse > Table Properties
Propriedades da Tabela

 

LAYOUT

 

Ø     Alignment - Alinhamento da tabela
Float – Flutuar - alinhamento do texto na tabela
Cell padding – Enchimento da Célula - regula o espaço da borda e célula
Cell spacing – Espaçamento da Célula - regula o espaço entre as células
Specify width - Especifica a Largura
Specify height - Especifica a Altura

 

BORDERS – BORDAS

 

Ø     Size - Tamanho da Borda
Color - Cor da Borda
Light Border – Borda Clara - cor do relevo da borda na parte superior da tabela
Dark Border – Borda Escura - cor de relevo da borda na parte inferior da tabela

 

BACKGROUND - PLANO DE FUNDO

 

Ø     Color - Cor de Plano de Fundo da Tabela
Use background picture - Usar Figura como Plano de Fundo da tabela

 

Style – Estilo - insere recursos de CSS - Folha de Estilos na tabela

 

 

OUTRAS PROPRIEDADES DA TABELA NO FRONTPAGE 2000

 

View > Toolbars > Tables
Exibir > Barra de Ferramentas > Tabelas e observe que será exibido vários ícones sobre as propriedades da tabela

 

       


Draw Table - Desenhar Tabela

 

Eraser – Borracha

 

Insert Rows - Inserir Linhas

 

Insert Colunms - Inserir Colunas

Delete Cells - Excluir Células

 

Merge Cells - Mesclar Células


Split Cells - Dividir Células

Fill Color – Cor de Preenchimento - pintar Tabela ou Célula

 

AutoFit - Auto-Ajustar

 

PROPRIEDADES DE UMA CÉLULA NO FRONTPAGE 2000

 

Clique sobre a célula que queira modificar > Cell Proprerties (Propriedades da Célula)

 

LAYOUT

 

Ø     Horizontal alignment - Alinhamento da célula na horizontal
Vertical alignment – Alinhamento vertical da célula
Rows spanned – Linhas Incluídas - define quantas linhas irá ocupar uma célula em uma tabela irregular
Columns spanned – Colunas Incluídas - define quantas colunas irá ocupar uma célula em uma tabela irregular
Header cell – Célula do Cabeçalho - especifica a Célula Título
No wrap – Sem quebra automática
Specify width - especifica a largura
Specify height - especifica a altura

 

BORDERS – BORDAS

 

Ø     Color - Cor da Borda
Light Border – Borda Clara - cor do relevo da borda na parte superior da célula
Dark Border – Borda Escura - cor de relevo da borda na parte inferior da célula

 

BACKGROUND - PLANO DE FUNDO

 

Ø     Color - Cor de Plano de Fundo da célula
Use background picture - usar figura como plano de fundo da célula
Style - Estilo - insere recursos de CSS - Folha de Estilos na célula

 

EXERCÍCIO 5 – TABELAS

 

1.    File > Open Web
Arquivo > Abrir Web e abra seu site

2.    File > New > Page
Arquivo > Novo > Página

3.     File Arquivo > Save As
Arquivo > Salvar Como

4.    Salvar como exer5.htm na pasta onde você salvou o exer1.htm
View > Toolbars > Tables
Exibir > Ferramentas > Tabelas

5.    Clique dentro da página com o botão direito do mouse > Page Properties
Propriedades da Página

6.    General (Geral) > Title (Título) digite : Exercício 5
Background (Plano de Fundo) > Browse (Selecionar)
Clique em Select a file in your computer (Selecionar um arquivo no seu computador) e procure no seu computador uma imagem que será o fundo da página
Margins ( Margens ) - deixar como está

7.    Custom - para inserir comandos metas que especificam dados sobre a página;
clique em Add ( Adicionar ) na parte de baixo e digite :
Name ( Nome ) : Author ; Value ( Valor ) : seu nome
clique em Add ( Adicionar ) na parte de baixo e digite :
Name ( Nome ): Description ; Value ( Valor ) : mailto:microman@phoenixline.com.br digite seu email
clique em Add ( Adicionar ) na parte de baixo e digite :
Name ( Nome ) : Description ; Value ( Valor ) : digite uma descrição sobre a página, neste exemplo , página sobre tabelas. OK

8.    Language ( Idioma ) e escolha o Português do Brasil ( Opcional )

9.    WorkShop : Grupo de Trabalho ( Opcional )
Available categories Categorias Disponíveis - especificar tipo de categoria do site
Assigned to Atribuído à - site feito por
Review Status Status da Revisão

10.          File > Save Arquivo > Salvar

11.          Abrirá uma Caixa de diálogo : Save Embbeded Files ( Salve Arquivos Inseridos ) com o nome da imagem;

12.          Clique no botão Change Folder ( Mudar de Pasta ) , pois todas as imagens devem ser guardadas dentro da pasta images/ ( imagens/ ) que foi criada automaticamente pelo FrontPage quando você criou o Site Curso

13.          Clique OK e o FrontPage faz uma cópia automaticamente para seu site

14.          Clique em Style ( Estilo ) > Heading 1 ( Título 1 )

15.          Centralize o texto

16.          Digite : TABELAS ( e pinte de azul escuro )

17.          Insert > Horizontal Line
Inserir > Linha Horizontal

18.          Selecione a linha horizontal e com o botão direito do mouse :
Horizontal Line Properties ( Propriedades da Linha Horizontal )
width ( largura ): 90% ; color ( cor ) : este comando dá cor a linha horizontal, e ele só é aceito no Internet Explorer

19.          Clique em Insert Table (Inserir Tabela) e insira uma tabela 3  x 3

20.          Clique sobre a tabela com o botão direito do mouse > Table Properties
Propriedades da Tabela

21.   Alignment: center  Alinhamento : centralizado
 Cell padding: 2  Enchimento da Célula : 2
Cell spacing : 1 Espaçamento da Célula : 1
Border : 2  Borda : 2
Background Color (Cor de Plano de Fundo) - escolha uma cor de fundo                   Specify Width ( Especificar Largura ) :  80%

22.          Preencha a tabela com alguns dados

23.          Selecione toda a tabela e centralize os textos

24.          Dica: caso queira inserir outra tabela abaixo desta tabela , ao inseri-la no FrontPage, elas ficarão juntas ; para contornar este problema insira abaixo uma tabela sem bordas com altura de 15 pixels e depois insira abaixo desta tabela invisível a outra tabela normalmente

25.          Clique abaixo desta tabela e clique em e insira uma tabela 1 linha x 1 coluna

26.          Clique sobre a tabela com o botão direito do mouse > Table Properties
Propriedades da Tabela

27.          Alignment : default  Alinhamento : padrão
Cell padding : 0  Enchimento da Célula : 0
Cell spacing : 0   Espaçamento da Célula : 0
Border : 0  Borda : 0
Specify Height ( Especificar Altura ) :  15 pixels

28.          Clique abaixo desta tabela invisível e clique em Insert Table (Inserir Tabela)e insira uma tabela 2 linhas x 2 colunas

29.          Clique sobre a tabela, botão direito do mouse, Propriedades da Tabela

30.          Alinhamento : centralizado
 Enchimento da Célula : 2
 Espaçamento da Célula : 1
 Borda : 3
 Cor de Plano de Fundo  -  escolha uma cor de fundo para tabela
 Especificar Largura  :  80%

31.          Selecione somente a segunda coluna toda e clique em Mesclar as células

32.          Preencha a tabela com alguns dados

33.          Selecione toda a tabela e centralize os textos

34.          Insira outra tabela invisível abaixo de 15 pixels de altura

35.          Clique abaixo desta tabela invisível e clique Inserir Tabela   e insira uma tabela 4 linhas x 4 colunas

36.          Clique sobre a tabela com o botão direito do mouse > Propriedades da Tabela

37.          Alinhamento : centralizado
 Enchimento da Célula : 0
 Espaçamento da Célula : 4
 Borda : 0
 Cor de Plano de Fundo  -  escolha uma cor de fundo para tabela
 Especificar Largura :  80%

38.          Preencha a tabela com alguns dados

39.          Clique na ferramenta Cor de Preenchimento e pinte toda a primeira linha de uma cor

40.          Inserir > Linha Horizontal ( com 90% de largura )

41.          Digite centralizado : Seu Nome :
 Inserir > Símbolo > e escolha © ; 1999 ; ficando assim
Seu Nome © 1999
<crtl + enter > para inserir uma quebra de linha
digite seu email e dê um espaço para ativá-lo
Selecione este texto e coloque as fontes : verdana,arial,helvetica , 1 ( 8pt ) e em negrito

42.          Clique no disquete para salvar sua página

43.          Clique em Visualizar no Navaegador

 

 

 

FRAMES SEM BORDAS USANDO O FRONTPAGE 2000

 

1.    Abra a página principal do frame

2.    Clique com o botão direito do mouse e selecione Propriedades do Quadro

3.    Clique no item Página de Quadros > Quadros

4.    Desmarcar item Mostrar Bordas . Clique OK

EXERCÍCIO 6 - FRAMES NO FRONTPAGE 2000

 

1.    Abra o FrontPage 2000

2.    File > Open Web
Arquivo > Abrir Web e abra o Site que esteja trabalhando

3.    File > New Page > Frame Page
Arquivo > Nova Página > Página de Quadros

4.    Selecione : Contents  Conteúdo

5.    Será exibido um frame com duas colunas

6.    Clique na coluna da esquerda

7.    Caso a página que será exibida na coluna da esquerda já estiver feita
clique em Set Initial Page (Definir a Página Inicial)
e selecione a página
fazer o mesmo com a coluna da direita

8.    Caso a página que será exibida na coluna da esquerda não estiver feita
clique em New Page
Nova Página e digite menu
na coluna da direita digite apre  ( de apresentação )

9.    Clique no rodapé Frame Page HTML
 HTML de Página de Quadros

10.          Entre o comando <title >....</title>  digite o título da página, neste exemplo: Empresa X

11.          Retire as duas linhas seguintes para deixar seu código html limpo
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

12.          Mantendo ainda aberta os códigos do Frame Page HTML
HTML de Página de Quadros

13.          Clique no ícone do disquete para salvar

14.          Observe que será exibido que as duas colunas do frame contornadas com uma linha azul

15.          Selecione onde será salvo sua página

16.          No item : File Name (Nome do Arquivo) : exer6.htm  - a página principal de um site sempre é chamada de index.htm ou default.htm

17.          Clique Save: Salvar

18.          Observe que será exibido que a coluna da esquerda contornada com uma linha azul

19.          E No item : File Name
Nome do Arquivo o FrontPage colocou : menu.htm

20.          Clique Save: Salvar

21.          Observe que será exibido que a coluna da direita contornada com uma linha azul

22.          E no item : File Name
Nome do Arquivo o FrontPage colocou : apre.htm

23.          Clique Save: Salvar

24.          Clique no rodapé NORMAL

25.          Clique na coluna da esquerda com o botão direito do mouse
Frame Properties: Propriedades do Quadro
Name
Nome digite menu
Initial Page (Página Inicial) observe que já está menu.htm
Resizable in Browser (Redimensionável no Navegador) – deixa esta opção desmarcada para que o usuário não tenha a opção de redimensionar os frames no browser
Show ScrollBars (Mostrar Barras de Rolagem)
never – (nunca) – comando “no”
always – (sempre) – comando “yes”
if needed – (se preciso) – comando “auto”
neste exemplo selecione never – nunca

26.          Clique no disquete para salvar

27.          Clique na coluna da direita com o botão direito do mouse
Frame Properties (Propriedades do Quadro)
Name (Nome)digite apre
Initial Page (Página Inicial) observe que já está apre.htm
Resizable in Browser (Redimensionável no Navegador)  – deixa esta opção desmarcada para que o usuário não tenha a opção de redimensionar os frames no browser
Show ScrollBars (Mostar Barras de Rolagem)
never – nunca – comando “no”
always – sempre – comando “yes”
if needed – se preciso – comando “auto”
neste exemplo selecione if needed – se preciso

28.          Clique no disquete para salvar

29.          Clique no rodapé : Frame Page HTML
HTML da Página de Quadro

O mesmo nome do frame terá que ser o nome do target ( destino ) e  da página
no target do frame menu digite : menu
acrescente o comando target no frame apre e digite : apre

* quando fizer frames no FrontPage 2000 sempre inserir o comando target no último frame , pois é uma maneira automática de inserir na própria página que irá rodar  o comando <base target=”apre”>
* observe que a página que irá rodar será : apre.htm ; logo o alvo para os links será target=”apre”

<html>

<head>

<title>Empresa X</title>

</head>

 

<frameset cols="150,*">

  <frame name="menu" target="menu" src="menu.htm" scrolling="no" noresize>

  <frame name="apre" target="apre" src="apre.htm" scrolling="auto" noresize>

  <noframes>

  <body>
<p>Esta página usa quadros mas seu navegador não aceita quadros.</p>

</body>

  </noframes>

</frameset>

</html>

 

30.          Clique no rodapé : NORMAL

31.          Feche a página exer6.htm

32.          Crie duas outras páginas simples : a primeira serv.htm  ( Serviços ) e a Segunda clientes.htm ( Clientes ) e digite alguma coisa nelas

33.          Abra a página apre.htm

34.          Retire a palavra apre e digite alguma coisa nela

35.          Clique no rodapé HTML
Title
Título digite : Apresentação
Observe que o FrontPage 2000 colocou antes do comando </head> ; <base target=”apre”> , pois será a página que irá rodar

36.          Abra a página menu.htm

37.          Retire a palavra menu

38.          Coloque uma cor como fundo da página

39.          Digite : Apresentação
dê <enter>

40.          Digite : Serviços
dê <enter>

41.          Digite : Clientes

42.          Selecione a palavra Apresentação e clique na ferramenta Insert Hyperlink
Inserir Hiperlink ( Mundo de óculos )
URL : selecione apre.htm
Na parte de baixo clique no ícone do lápis : Target Frame
Quadro de Destino
Digite : apre ( que é o alvo da página que irá rodar )

43.          Selecione a palavra Serviços e clique na ferramenta Insert Hyperlink
Inserir Hiperlink ( Mundo de óculos )
URL : selecione serv.htm
Na parte de baixo clique no ícone do lápis : Target Frame
Quadro de Destino
Digite : apre ( que é o alvo da página que irá rodar )

44.          Selecione a palavra Clientes e clique na ferramenta Insert Hyperlink
Inserir Hiperlink ( Mundo de óculos )
URL : selecione clientes.htm
Na parte de baixo clique no ícone do lápis : Target Frame
Quadro de Destino
Digite : apre ( que é o alvo da página que irá rodar )

45.          Salve sua página

46.          Abra a página exer6.htm

47.          Clique no ícone Preview in Browser
Visualizar no Navegador

48.          Teste os links


 

EXERCÍCIO 7 - FRAMES NO FRONTPAGE 2000

 

1.    Abra o FrontPage 2000

2.    File > Open Web
Arquivo > Abrir Web e abra o Site que esteja trabalhando

3.    File > New Page > Frame Page
Arquivo > Nova Página > Página de Quadros
Selecione : Hierarchical
Hierarquia aninhada
Será exibido um frame com duas colunas , sendo que a segunda coluna é dividida em duas linhas

4.    Clique na coluna da esquerda

5.    Caso a página que será exibida na coluna da esquerda já estiver feita
clique em Set Initial Page (Definir Página Inicial)
e selecione a página
fazer o mesmo com a coluna da direita

6.    Caso a página que será exibida na coluna da esquerda não estiver feita
clique em New Page (Nova Página) e digite indice
na coluna da direita na parte superior digite logo ( de logotipo )
na coluna da direita na parte inferior digite intro ( de introdução )

7.    Clique no rodapé Frame Page HTML
HTML de Página de Quadro

8.    Entre o comando <title > .... </title> digite o título da página , neste exemplo : Empresa Y

9.    Retire as duas linhas seguintes para deixar seu código html limpo
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

10.          Mantendo ainda aberta os códigos do Frame Page HTML
HTML de Página de Quadro

11.          Clique no ícone do disquete para salvar
Observe que será exibido que as duas colunas do frame contornadas com uma linha azul
Selecione onde será salvo sua página
No item : File Name (Nome do Arquivo) : exer7.htm - a página principal de um site sempre é chamada de index.htm ou default.htm

12.          Clique Save (Salvar)
Observe que será exibido que a coluna da esquerda contornada com uma linha azul
No item : File Name (Nome do Arquivo) o FrontPage colocou : indice.htm

13.          Clique Save (Salvar)
Observe que será exibido que a coluna da direita na parte superior contornada com uma linha azul
No item : File Name (Nome do Arquivo )o FrontPage colocou : logo.htm

14.          Clique Save (Salvar)
Observe que será exibido que a coluna da direita na parte inferior contornada com uma linha azul
No item : File Name
Nome do Arquivo o FrontPage colocou : intro.htm
Clique Save (Salvar)

15.          Clique no rodapé NORMAL

16.          Clique na coluna da esquerda com o botão direito do mouse Frame Properties (Propriedades do Quadro)
Name (Nome): digite indice
Initial Page (Página Inicial) observe que já está indice.htm
Resizable in Browser (Redimensionável no Navegador) – deixa esta opção desmarcada para que o usuário não tenha a opção de redimensionar os frames no browser
Show ScrollBars (Mostrar Barras de Rolagem)
never – nunca – comando "no"
always – sempre – comando "yes"
if needed – se preciso – comando "auto"
neste exemplo selecione never – nunca

17.          Clique no disquete para salvar

18.          Clique na coluna da direita superior com o botão direito do mouse
Frame Properties (Propriedades do Quadro)
Name (Nome): digite logo
Initial Page (Página Inicial) observe que já está logo.htm
Resizable in Browser (Redimensionável no Navegador) – deixa esta opção desmarcada para que o usuário não tenha a opção de redimensionar os frames no browser
Show ScrollBars (Mostrar Barras de Rolagem)
never – nunca – comando "no"
always – sempre – comando "yes"
if needed – se preciso – comando "auto"
neste exemplo selecione never – nunca

19.          Clique no disquete para salvar

20.          Clique na coluna da direita inferior com o botão direito do mouse
Frame Properties (Propriedades do Quadro)
Name (Nome): digite intro
Initial Page (Página Inicial):  observe que já está intro.htm
Resizable in Browser (Redimensionável no Navegador) – deixa esta opção desmarcada para que o usuário não tenha a opção de redimensionar os frames no browser
Show ScrollBars
Mostrar Barras de Rolagem
never – nunca – comando "no"
always – sempre – comando "yes"
if needed – se preciso – comando "auto"
neste exemplo selecione if needed – se preciso
clique em Frame Page (Página de Frames)
Desmarque Show Border ( Exibir Borda ) para que seu frame seja sem bordas

21.          Clique no disquete para salvar

22.          Clique no rodapé : Frame Page HTML
HTML de Página de Quadro
O mesmo nome do frame terá que ser o nome do target ( destino ) e da página no target do frame indice digite : indice
no target do frame logo digite : logo
acrescente o comando target no frame intro e digite : intro
* quando fizer frames no FrontPage 2000 sempre inserir o comando target no último frame , pois é uma maneira automática de inserir na própria página que irá rodar o comando <base target="intro">
* observe que a página que irá rodar será : intro.htm ; logo o alvo para os links será target="intro"

<html>
<head>
<title>Empresa Y</title></head>
<frameset cols="150,*" framespacing="0" border="0" frameborder="0">
<frame name="indice" scrolling="no" noresize target="indice" src="indice.htm">
<frameset rows="20%,*">
<frame name="logo" target="logo" src="logo.htm" scrolling="no" noresize>
<frame name="intro" target="intro" src="intro.htm" scrolling="auto" noresize>
</frameset>
<noframes>
<body>
<p>Esta página usa quadros mas seu navegador não aceita quadros.</p>
</body>
</noframes>
</frameset>
</html>

23.          Clique no rodapé : NORMAL

24.          Feche a página exer7.htm

25.          Crie duas páginas simples : a primeira pesq.htm ( Pesquisa ) e a Segunda promo.htm ( Promoções ) e digite algum conteúdo.

26.          Abra a página intro.htm

27.          Retire a palavra intro e digite algo emn seu lugar.

28.          Clique no rodapé HTML

29.          Title (Título digite) : Introdução
Observe que o FrontPage 2000 colocou antes do comando </head> ;
<base target="intro"> , pois será a página que irá rodar

30.          Abra a página indice.htm

31.          Retire a palavra indice
Coloque uma cor como fundo da página

32.          Digite : Introdução
dê <enter>Digite : Pesquisa
dê <enter>Digite : Promoção

33.          Selecione a palavra Introdução e clique na ferramenta Insert Hyperlink
Inserir Hiperlink ( Mundo de óculos )
URL : selecione intro.htm
Na parte de baixo clique no ícone do lápis : Target Frame
Destino do Quadro
Digite : intro ( que é o alvo da página que irá rodar )

34.          Selecione a palavra Pesquisa e clique na ferramenta Insert Hyperlink
Inserir Hiperlink ( Mundo de óculos )
URL : selecione pesq.htm
Na parte de baixo clique no ícone do lápis : Target Frame
Destino do Quadro
Digite : intro ( que é o alvo da página que irá rodar )

35.          Selecione a palavra Promoção e clique na ferramenta Insert Hyperlink
Inserir Hiperlink ( Mundo de óculos )
URL : selecione promo.htm
Na parte de baixo clique no ícone do lápis : Target Frame
Destino do Quadro
Digite : intro ( que é o alvo da página que irá rodar )
Coloque uma cor de fundo na página indice.htm

36.          Salve sua página

37.          Abra a página logo.htm

38.          Retire a palavra logo e digite : EMPRESA Y
Coloque a mesma cor de fundo que colocou na página indice.htm

39.          Salve sua página

40.          Abra a página exer7.htm

41.          Clique no ícone Preview in Browser
Visualizar no Navegador

42.          Teste os links

 

COMPONENTES DO FRONTPAGE 2000

 

EXTENSÕES DO FRONTPAGE 2000

 

COMO INSTALAR AS AS EXTENSÕES

 

1.    Insira o CD do FrontPage 2000 no driver

2.    Start > Windows Explorer
Iniciar > Gerenciador de Arquivos

3.    Selecione o driver onde está o CD

4.    Abrir

5.    Selecione o arquivo servext

6.    Clique duas vezes para instalar as extensões

7.    Siga as instruções e faça a instalação

8.    Reinicie seu computador

 

COMO CONFIGURAR AS EXTENSÕES

 

1.    Para ativar as extensões abra o FrontPage 2000

2.    Tools > Page Options  > Compatibility

3.    Ferramentas > Opções da Página > Compatibilidade
( x ) Eneabled with Microsoft FrontPage Extensions
( x ) Ativado as Extensões do Microsoft FrontPage

 

COMPONENTES DO FRONTPAGE 2000

 

Os componentes do FrontPage 2000 só irão rodar se as extensões do FrontPage 2000 estiverem instaladas no seu computador e também no servidor onde você hospedar suas páginas . Os componentes do FrontPage 2000 são os seguintes  :

 

Ø     Hit Counter - Contador de Acessos

Ø     Confirmation Field - Campo de Confirmação

Ø     Include Page - Página de Inclusão  

Ø     Scheduled Include Page - Página de Inclusão Programada

Ø     Categories - Categorias

Ø     Search Form - Formulário de Pesquisa

Ø     Additional Components - Componentes Adicionais

 

 

 

 

HIT COUNTER – CONTADOR DE ACESSO

 

1.    Insert > Component > Hit Counter
Inserir > Componente > Contador de Acessos

2.    Selecione o tipo de contador

3.    Defina se o contador iniciará do zero ou outro número

4.    Defina o número de dígitos fixos

5.    Clique OK

6.    Teste no seu browser ; o contador rodar se as extensões do FrontPage 2000 estiverem instaladas no seu computador

 

CONFIRMATION FIELD - CAMPO DE CONFIRMAÇÃO

 

1.    Insert > Component > Confirmation Field
Inserir > Componente > Campo de Confirmação

2.    Este componente para criar a página de confirmação de um formulário
( veja capítulo sobre formulários ) ; só irá rodar se as extensões do FrontPage 2000 estiverem instaladas no seu computador

 

INCLUDE PAGE - PÁGINA DE INCLUSÃO

 

1.    Insert > Component > Include Page
Inserir > Componente > Página de Inclusão

2.    Este componente incluir uma página dentro de outra página

3.    Selecione a página que queira incluir

4.    Clique OK

5.    Teste no seu browser ; só irá rodar se as extensões do FrontPage 2000 estiverem instaladas no seu computador

 

Observação :

No componente Scheduled Include Page - Página de Inclusão Programada , você determina o tempo em que cada página incluída irá permanecer exibida

 

SEARCH FORM - FORMULÁRIO DE PESQUISA

 

1.    Insert > Component > Search Form
Inserir > Componente > Formulário de Pesquisa

2.    Search Form Properties
Propriedades do Formulário de Pesquisa

3.    Label ( Rótulo ) : Pesquisar

4.    Width ( Largura em Caracteres ) : 40

5.    Label Start Search Button
Rótulo do Botão Iniciar Pesquisa - Pesquisar agora

6.    Label Reset Button
Rotúlo do Botão Limpar – Limpar

7.    Clique Ok
Teste no seu browser ; só irá rodar se as extensões do FrontPage 2000 estiverem instaladas no seu computador

 

FORMULÁRIOS


Os formulários servem para receptar os dados do usuário para programas que rodam nos servidores, o servidor da www recebe os dados enviados pelo usuário e os repassa através de um protocolo chamado CGI ( "Common Gateway Interface") ou em programas mais elaborados em Perl , C , Java , Asp , etc.

Os comandos do formulário é <form> ...</form>

<form method = "método de envio" action =" url destino">

Existem dois métodos de entrega dos formulários :

Ø     method = "get" ( envia os dados para uma caixa postal especifica via protocolo CGI e recebe algo de volta ) ; exemplo : o usuário preenche o formulário e quando envia tem permissão de fazer o download de um programa

Ø     method = "post" ( envia os dados para uma caixa postal especificada via protocolo CGI )

Ø     action - especifica a URL onde está o programa que vai processar os dados do formulário

Ø     input - especifica cada um dos campos do formulário e suas respectivas propriedades

Ø     type – especifica o forma de dado a ser inserido no campo de preenchimento : text      ( texto ) , password ( senha ) , botões de múltipla escolha radio e checkbox e botões submit ( enviar ) e reset ( apagar )

Ø     name - este nome será usado na frase de busca para distinguir esse campo dos outros

Ø     value – especifica a variável do campo de preenchimento

Ø     size - indica a quantidade de caracteres exibida no campo de preenchimento

Ø     maxlength – indica a quantidade máxima de caracteres no campo de preenchimento

Exemplo

<input type="password" value ="senha" name ="sua_senha" size="6" maxlength ="6">

Ø     A senha será de até 6 caracteres que serão exibidos por asteriscos ; mesmo que o valor default value esteja representado por asteriscos, o usuário pode visualizar o seu valor através da visualização dos recursos de html ( uma opção comum na maioria dos clientes www )

TEXTAREA

<textarea>...</textarea> definem uma região onde o usuário pode escrever um texto com várias linhas; por exemplo : Críticas e Sugestões

<form>

<textarea name = “nome do campo”  rows =”linhas” cols = “largura” wrap >

</textarea>

</form>

Ø     rows = especifica a altura da área de texto

Ø     cols = especifica a largura para área de texto

Ø     wrap = liga a quebra de linha automática; isto é, quando especificada, faz com que toda vez que o texto passe da margem , cria automaticamente uma nova linha

CAIXAS DE OPÇÕES

Ø     type=”radio”  - que permite escolher somente uma opção entre as alternativas oferecidas

Ø     type=”checked” - que permite que várias opções possam ser escolhidas

<form>

Quais são os planetas que você gostaria de estudar ?

<input="radio" name="planeta" value="marte">Marte

<input="radio" name="planeta" value="terra">Terra

<input="radio" name="planeta" value="venus">Vênus

</form>

Ø     type=”submit”  – especifica o botão enviar

Ø     type=”reset” – especifica o botão apagar

<input type="submit" value="submit" name="enviar">
<input type="reset" value="reset" name="limpar">

 

FORMULÁRIO NO FRONTPAGE 2000

 

Insert > Form > One Line TextBox

Inserir > Formulário > Caixa de texto de uma linha

 

Ø     One Line Text Box – Caixa de texto de uma linha

Ø     Scrolling Text Box – Caixa de texto de rolagem

Ø     Check Box – Botão de Seleção

Ø     Radio Button – Botão de Opção

Ø     DropDown Menu - Menu Suspenso

Ø     Push Button - Botão de Ação ( enviar / limpar )

Ø     Picture – Figura - inserir imagem

Ø     Label – Rótulo - inserir rótulo

Ø     Form Properties - Propriedades do Formulário

 

PROPRIEDADES DO FORMULÁRIO NO FRONTPAGE 2000

 

Para especificar o programa que irá rodar o formulário, existe três alternativas oferecidas pelo FrontPage 2000 ;

Clique sobre o formulário com o botão direito do mouse > Form Properties

Propriedades do Formulário

 

1.    Send to (Enviar Para)  - rodar o formulário no Webbot – programa que vem junto ao FrontPage 2000

2.    Send to database
Enviar para Banco de Dados – rodar o formulário em Banco de Dados

3.    Send to other
Enviar para outro – rodar o formulário com outro programa

 

EXERCÍCIO 8 -  FORMULÁRIO 1 – USANDO WEBBOT

 

1.    File > New Page
Arquivo > Nova Página

2.    Salve como exer8.htm

3.    View > Toolbars > Table
Exibir > Barra de Ferramentas > Tabela

4.    Digite centralizado : FORMULÁRIO 1 ( usando heading 1 )

5.    Insira uma linha horizontal de 90% de largura

6.    Digite centralizado : Por favor , preencha o formulário abaixo

7.    Dê <enter> e ponha o cursor com alinhamento à esquerda

8.    Insert > Form > One Line TextBox
Inserir > Formulário > Caixa de texto de uma linha

9.    Observe que será exibido uma caixa de texto de uma linha e os botões submit  e reset dentro de um retângulo pontilhado , isto é , todos os comandos do formulário tem que estar dentro deste retângulo pontilhado

10.          Vamos criar um formulário com tabela , para que a diagramação fique mais bem apresentada

11.          Clique na tecla HOME do seu teclado e observe que o cursor do mouse irá para a frente do One Line Textbox ( Caixa de texto de uma linha )

12.          Dê dois <enter>

13.          Observe que parte do formulário desceu

14.          Clique na tecla das setinhas e suba o cursor do mouse duas vezes

15.          Insira uma tabela de 2 colunas x 7 linhas

16.          Clique sobre a tabela > Table Properties (Propriedades da Tabela)
Alignment (Alinhamento) : center ( centralizado )
Specify Width ( Especificar Largura ) : 80%
Cell Padding
( Enchimento da Célula ) : 0
Cell Spacing
( Espaçamento da Célula ) : 0
Border Size
( Tamanho da Borda ) : 0

17.          Selecione somente a primeira coluna > Cell Properties
Propriedades da Célula
Specify Width ( Especificar Largura ) : 20%

18.          Selecione somente a segunda coluna > Cell Properties
Propriedades da Célula
Specify Width ( Especificar Largura ) : 80%

19.          Digite na primeira linha da primeira coluna : Nome

20.          Clique na primeira linha da segunda coluna
Insert > Form > One Line TextBox
Inserir > Formulário > Caixa de texto de uma linha

21.          Digite na segunda linha da primeira coluna : Email

22.          Clique na segunda linha da segunda coluna
Insert > Form > One Line TextBox
Inserir > Formulário > Caixa de texto de uma linha

23.          Digite na terceira linha da primeira coluna : Endereço

24.          Clique na terceira linha da segunda coluna
Insert > Form > One Line TextBox
Inserir > Formulário > Caixa de texto de uma linha

1.    Digite na quarta linha da primeira coluna : Cidade

2.    Clique na quarta linha da segunda coluna
Insert > Form > One Line TextBox
Inserir > Formulário > Caixa de texto de uma linha

3.    Digite na quinta linha da primeira coluna : Estado

4.    Clique na quinta linha da segunda coluna
Insert > Form > One Line TextBox
Inserir > Formulário > Caixa de texto de uma linha

5.    Digite na sexta linha da primeira coluna : Cep

6.    Clique na sexta linha da segunda coluna
Insert > Form > One Line TextBox
Inserir > Formulário > Caixa de texto de uma linha

7.    Selecione a sétima linha toda

8.    Clique no ícone Merge Cells
Mesclar Células

9.    Observe que as duas células da sétima linha se transformaram em uma linha

10.          Mantendo o cursor dentro da sétima linha
Insert Rows
Inserir Linhas clicando 12 vezes

11.          Clique na sétima linha > Cells Properties
Propriedades da Célula
Specify height ( Especificar altura ) : 15 pixels para deixar esta linha vazia e com uma altura de 15 pixels que melhora sensivelmente a diagramação do formulário

12.          Clique na oitava linha e ponha o cursor centralizado

13.          Digite : Críticas e Comentários

14.          Clique na nona linha e ponha o cursor centralizado

15.          Insert > Form > Scrolling Textbox
Inserir > Formulário > Caixa de texto de rolagem

16.          Clique na décima linha > Cells Properties
Propriedades da Célula
Specify height ( Especificar altura

17.           ) : 15 pixels para deixar esta linha vazia e com uma altura de 15 pixels que melhora sensivelmente a diagramação do formulário

18.          Clique na décima primeira linha e ponha o cursor centralizado

19.          Digite : Escolha as áreas de seu interesse

20.          Clique na décima segunda linha e ponha o cursor centralizado

21.          Insert > Form > Checkbox
Inserir > Formulário > Botão de Seleção

22.          Digite : Informática e dê quatro espaços

23.          Insert > Form > Checkbox
Inserir > Formulário > Botão de Seleção

24.          Digite : Política e dê quatro espaços

25.          Insert > Form > Checkbox
Inserir > Formulário > Botão de Seleção

26.          Digite : Economia e dê quatro espaços

27.          Insert > Form > Checkbox
Inserir > Formulário > Botão de Seleção

28.          Digite : Ecologia

29.          Clique na décima terceira linha > Cells Properties
Propriedades da Célula
Specify height ( Especificar altura ) : 15 pixels para deixar esta linha vazia e com uma altura de 15 pixels que melhora sensivelmente a diagramação do formulário

30.          Clique na décima quarta linha e ponha o cursor centralizado

31.          Digite : Escolha um brinde que queira ganhar

32.          Clique na décima quinta linha e ponha o cursor centralizado

33.          Insert > Form > Radio Button
Inserir > Formulário > Botão de Opção

34.          Digite : Boné e dê quatro espaços

35.          Insert > Form > Radio Button
Inserir > Formulário > Botão de Opção

36.          Digite : Camiseta e dê quatro espaços

37.          Insert > Form > Radio Button
Inserir > Formulário > Botão de Opção

38.          Digite : Chaveiro e dê quatro espaços

39.          Insert > Form > Radio Button
Inserir > Formulário > Botão de Opção

40.          Digite : Caneta

41.          Clique na décima sexta linha > Cells Properties
Propriedades da Célula
Specify height ( Especificar altura ) : 15 pixels para deixar esta linha vazia e com uma altura de 15 pixels que melhora sensivelmente a diagramação do formulário

42.          Clique na décima sétima linha e ponha o cursor centralizado

43.          Digite : Escolha seu time de futebol
dê dois espaços
Insert > Form > DropDown Menu
Inserir > Formulário > Menu Suspenso

44.          Clique na décima oitava linha > Cells Properties
Propriedades da Célula
Specify height ( Especificar altura ) : 15 pixels para deixar esta linha vazia e com uma altura de 15 pixels que melhora sensivelmente a diagramação do formulário

45.          Clique na décima nona linha e ponha o cursor centralizado

46.          Copie os botões submit e reset e coloque nesta linha

47.          Delete uma Caixa de texto de uma linha que ficou do lado de fora da tabela

48.          Selecione a Caixa de texto ao lado de Nome
Form Field Properties
Propriedades do Campo do Formulário
Name : Nome
Width in Characters ( Largura em caracteres ) : 40
Tab Order ( Ordem do Dado ) : 1

49.          Selecione a Caixa de texto ao lado de Nome
Form Field Properties
Propriedades do Campo do Formulário
Name : Email
Width in Characters ( Largura em caracteres ) : 40
Tab Order ( Ordem do Dado ) : 2

50.          Selecione a Caixa de texto ao lado de Endereço
Form Field Properties
Propriedades do Campo do Formulário
Name : Endereco ( sem ç )
*
em programação dos dados do item “name” não aceitam acentos , ç e hífen , pois os programs que rodam os formulários
Width in Characters ( Largura em caracteres ) : 40
Tab Order ( Ordem do Dado ) : 3

51.          Selecione a Caixa de texto ao lado de Cidade
Form Field Properties
Propriedades do Campo do Formulário
Name : Cidade
Width in Characters ( Largura em caracteres ) : 40
Tab Order ( Ordem do Dado ) : 4

52.          Selecione a Caixa de texto ao lado de Estado
Form Field Properties
Propriedades do Campo do Formulário
Name : Estado
Width in Characters ( Largura em caracteres ) : 02
Tab Order ( Ordem do Dado ) : 5

53.          Selecione a Caixa de texto ao lado de Cep
Form Field Properties
Propriedades do Campo do Formulário
Name : Cep
Width in Characters ( Largura em caracteres ) : 09
Tab Order ( Ordem do Dado ) : 6

54.          Selecione a Caixa de texto abaixo de Críticas e Comentários
Form Field Properties
Propriedades do Campo do Formulário
Name : Comentarios ( sem acento )
Width in Characters ( Largura em caracteres ) : 60
Number of lines ( Número de linhas ) : 4
Tab Order ( Ordem do Dado ) : 7

55.          Clique no botão checkbox ao lado de Informática
Form Field Properties
Propriedades do Campo do Formulário
Name : Area ( sem acento ) – como é múltipla escolha e estamos falando de área de interesse
Value : Informatica
( sem acento )
 
Tab Order ( Ordem do Dado ) : 8

56.          Clique no botão checkbox ao lado de Política
Form Field Properties
Propriedades do Campo do Formulário
Name : Area ( sem acento ) – como é múltipla escolha e estamos falando de área de interesse
Value : Politica
( sem acento )
 
Tab Order ( Ordem do Dado ) : 9

57.          Clique no botão checkbox ao lado de Economia
Form Field Properties
Propriedades do Campo do Formulário
Name : Area ( sem acento ) – como é múltipla escolha e estamos falando de área de interesse
Value : Economia
Tab Order ( Ordem do Dado ) : 10

58.          Clique no botão checkbox ao lado de Ecologia
Form Field Properties
Propriedades do Campo do Formulário
Name : Area ( sem acento ) – como é múltipla escolha e estamos falando de área de interesse
Value : Ecologia
( sem acento )
Tab Order ( Ordem do Dado ) : 11

59.          Clique no botão radio ao lado de Boné
Form Field Properties
Propriedades do Campo do Formulário
Group Name : Brinde – como é múltipla escolha e estamos falando de brinde
Value : Boné
( sem acento )
Tab Order ( Ordem do Dado ) : 12

60.          Clique no botão radio ao lado de Camiseta
Form Field Properties
Propriedades do Campo do Formulário
Group Name : Brinde – como é múltipla escolha e estamos falando de brinde
Value : Camiseta
Tab Order ( Ordem do Dado ) : 13

61.          Clique no botão radio ao lado de Chaveiro
Form Field Properties
Propriedades do Campo do Formulário
Group Name : Brinde – como é múltipla escolha e estamos falando de brinde
Value : Chaveiro
Tab Order ( Ordem do Dado ) : 14

62.          Clique no botão radio ao lado de Caneta
Form Field Properties
Propriedades do Campo do Formulário
Group Name : Brinde – como é múltipla escolha e estamos falando de brinde
Value : Caneta
Tab Order ( Ordem do Dado ) : 15

63.          Clique no DropDown Menu ao lado de Futebol
Form Field Properties
Propriedades do Campo do Formulário
Name : Futebol
Height ( Altura ) : 1
Tab Order : 16
Clique em Add ( Adicionar ) – neste item é aceito acentos
Choice ( Escolha ) digite : Escolha seu time
Clique OK
Clique em Add ( Adicionar )
Choice ( Escolha ) digite : Flamengo
Clique OK
Repita o mesmo procedimento e digite : Vasco da Gama , Botafogo , Fluminense , Palmeiras , São Paulo , Santos , Corínthians

64.          Clique no botão submit
Form Field Properties (Propriedades do Campo do Formulário)
Name : Enviar
Value/Label : Enviar
Button type ( tipo do botão ) : deixe marcado submit ( submeter )
Tab Order : 17

65.          Clique no botão submit
Form Field Properties (Propriedades do Campo do Formulário)
Name : Limpar
Value/Label : Limpar
Button type ( tipo do botão ) : deixe marcado reset ( redefinir )
Tab Order : 18


66.          Salve o exer8.htm

67.          Crie uma nova página como confirma.htm e salve-a , pois vamos fazer mais adiante

68.          Volte à página do formulário exer8.htm
Clique sobre o formulário com o botão direito do mouse > Form Properties
Propriedades do Formulário
Send to (Enviar Para) - rodar o formulário no Webbot – programa que vem junto ao FrontPage 2000
( x ) File Name ( Nome do Arquivo )
digite : _private/resultado.txt
neste caso os dados vão para a pasta private chamado resultado.txt – esta opção é usada em Intranets

69.          Clique em Options (Opções)
File Results (Resultados do Arquivo)
File Name (Nome do Arquivo) – observe que está _private/resultado.txt
File Format – Formatted Text
Formato de Texto – Texto Formtado
E-mail Results (Resultados do E-mail)
E-mail Format – Formatted text
Formato do E-mail – Texto formatado
Confirmation Page (Página de Confirmação)
URL – confirma.htm
Saved Fields (Campos de Preenchimentos Salvos)
Observe que está todos os campos de preenchimento selecionados
Mantendo a seleção <crtl + c> para copiar , pois iremos usar estes campos para criar a página de confirmação

70.          Clique OK

71.          Salve seu formulário

72.          Volte a página confirma.htm

73.          Digite : PÁGINA DE CONFIRMAÇÃO

74.          Insira uma linha horizontal de 90% de largura

75.          <crtl+v> para colar os Campos de Preenchimentos Salvos

76.          Clique ao lado de Nome
Insert > Component > Confirmation Field
Inserir > Componente > Campo de confirmação
Digite : Nome

77.          Clique ao lado de Email
Insert > Component > Confirmation Field
Inserir > Componente > Campo de confirmação
Digite : Email

78.          Faça o mesmo procedimentos com todos os outros ítens

79.          Retire o item enviar

80.          Salve a página confirma.htm

81.          Abra a página exer8.htm e teste seu formulário no browser , mas atenção : este formulário só irá rodar se as extensões do FrontPage 2000 estiverem instaladas

 

EXERCÍCIO 9 -  FORMULÁRIO 2  - USANDO  FORMMAIL.PL

 

Outra maneira de rodar o formulário é usar outro programa que não seja webbot ; neste exemplo vamos usar o formmail.pl que é muito usado.

Solicite ao seu servidor onde será hospedado seu site, qual o programa que roda formulário e os comandos “ hidden “ – são comandos já pré-determinados que criam a página de confirmação

 

1.    Faça o formulário conforme mencionamos no formulário 1 , seguindo as instruções do item 1 até 88

2.    Salve sua página como exer9.htm
Clique sobre o formulário Form Properties
Propriedades do Formulário

( x ) Send to Other
( x ) Enviar para Outro

Options > Action digite  : /cgi-bin/formmail.pl
Opções > Ação digite : /cgi-bin/formmail.pl

Method > Post
Método > Post
O programa formmail.pl ( que segue anexo a este capítulo e é em inglês ) e pl significa extensão em Perl ; é o programa que usamos quando você preencheu o formulário para ter acesso à 2ª parte do nosso curso
Não esqueça de fazer uma cópia do formmail.pl nesta pasta do seu site
O Formulário só irá rodar localmente se você instalar o perl.exe no seu computador ( informações de como instalar e rodar perl veja o site :
http://www.farol.com.br/lima/perl ( Dicas de Perl em português )

3.    Clique OK

4.    Clique em Advanced
Avançado para inserir os comandos “hiddens” do formmail.pl

5.    Clique em Add
Adicionar
Name : subject -  o comando subject será o assunto do email para onde irá os dados do formulário
Value : Formulário 2

6.    Clique em Add
Adicionar
Name : recipient -
- comando recipient denomina que todos os dados preenchidos pelo usuário serão enviados para uma caixa postal mencionada
Value : seu_nome@seu_provedor.com.br

7.    Clique em Add
Adicionar
Name : required -
o comando required denomina os dados que são obrigatórios o preenchimento do formulário mencionados, pois caso eles não são preenchidos , o formulário não é enviado ; neste exemplo colocamos dados obrigatórios Nome e Email
Value : Nome,Email

8.    Clique em Add
Adicionar
Name : title - o comando title especifica um título da Página de Confirmação
Value : Página de Confirmação do Formulário 2

9.    Clique em Add
Adicionar
Name : bgcolor – o comando bgcolor especifica a cor de fundo na página de confirmação
Value : #EAEAAE

10.                      Clique em Add ( opcional )
Adicionar
Name : background  – o comando background especifica uma imagem de fundo na página de confirmação
Value : images/fundo.gif ( neste exemplo vamos usar o bgcolor )

11.                      Clique em Add
Adicionar
Name : text_color - o comando text_color especifica a cor das letras na página de confirmação
Value :#000080

12.                      Clique em Add
Adicionar
Name : return_link_url – o comando return-link_url especifica o link no final da página de confirmação, caso o usuário queira voltar ao formulário
Value : form2.htm

13.                      Clique em Add
Adicionar
Name : return_link_title – o comando return-link_title especifica o texto que será exibido no link no final da página de confirmação, caso o usuário queira voltar ao formulário
Value : Voltar ao formulário

14.                      Clique OK

15.                      Salve seu formulário

EXERCÍCIO 10 -  FORMULÁRIO 3  - USANDO MAILTO.EXE

 

Neste exemplo vamos usar o mailto.exe , outro programa muito utilizado pelos servidores

 

1.    Faça o formulário conforme mencionamos no formulário 1 , seguindo as instruções do item 1 até 88

2.    Salve sua página como exer10.htm
Clique sobre o formulário Form Properties
Propriedades do Formulário

( x ) Send to Other
( x ) Enviar para Outro

Options > Action digite : /cgi-bin/mailto.exe
Opções > Ação digite : /cgi-bin/mailto.exe
Method > Post
Método > Post

3.    Clique OK

4.    Clique em Advanced
Avançado para inserir os comandos “hiddens” do mailto.exe

5.    Clique em Add (Adicionar)
Name : sendto – o comando sendto especifica o email para onde será enviado os dados do formulário
Value : seu_nome@provedor.com.br

6.    Clique em Add (Adicionar)
Name : server – o comando server especifica o servidor que está hospedado o site
Value : mail.servidor.com.br

7.    Clique em Add (Adicionar)
Name : subjecto comando subject será o assunto do email para onde irá os dados do formulário

8.    Clique em Add (Adicionar)
Name : resulturl – o comando resulturl especifica uma página de “ Obrigado “
Value : obrigado.htm ( página que deve ser criada posteriormente )

9.    Salve seu formulário

 

SITES SOBRE FORMULÁRIOS

 

http://www.cgi-resources.com

http://www.worldwidemart.com/scripts

http://www.webgenie.com

http://www.activeware.com

http://www.regra.com.br/forum-cgi ( Fórum de CGI )

http://www.perl.com

http://www.stepweb.com

BANCO DE DADOS

 

Existem vários programas para executar os Banco de Dados na Internet : os mais conhecidos são ASP da Microsoft e ColdFusion da Allaire . O cliente ( browser ) requisita uma página, o servidor executa o processamento dessa página, e envia para o cliente o resultado ( HTML ).

ODBC ( Open Database Conectivity ) é o meio de configurar o driver do seu computador para rodar um Banco de Dados

MS Access 97 ou 2000 é o programa que vamos usar para criar o banco de dados. Existem outros programas que criam o banco de dados, tais como :
Microsoft FoxPro , Microsoft Visual FoxPro , Corel Paradox , Imprise Visual dBase ,  etc.

As conexões de Banco de Dados podem ser :

Ø     Conexão com um banco de dados de arquivo , por exemplo do Access , no seu site

Ø     Conexão do sistema DSN – Data Source Name (nome da fonte de dados do sistema ) no servidor através de um arquivo

Ø     Conexão de uma rede com o servidor de banco de dados, por exemplo : Microsoft SQL Server ( SQL - Structured Query Language )

Ø     Conexão personalizada

Para publicar os dados do seu Banco de Dados se utiliza o FrontPage Region Wizard -  Assistente  de Resultados de Banco de Dados que pode também enviar declarações SQL para o seu servidor ou fazer diretamente no arquivo HTML.

.

A S P


ASP da Microsoft : 
http://www.microsoft.com/iis 

ASP utiliza scripts embutidos no HTML que são interpretados no servidor, criando páginas dinâmicas através de comandos VBScript ou JavaScript.
O FrontPage tem ferramentas que auxiliam a utilização de arquivos com a extensão asp, pois ele possui o FrontPage Region Wizard ( Modelo Regional do FrontPage ) que publica seus dados através SQL no seu servidor. A grande vantagem no uso de ASP é que o script ( VBScript & JavaScript ) é executado do lado do servidor e não no cliente, isso torna qualquer browser compatível por natureza. Em compensação o servidor de arquivos tem de estar rodando NT e uma Banco de Dados SQL . ASP não roda em servidor Unix

Quando se instala o FrontPage 2000 , já vem embutido a instalação do ASP automaticamente

SITES SOBRE ASP

http://www.aspdeveloper.net
http://www.activeserverpages.com
( tutoriais )
http://paulen.cnw.com/adohelp
( asp )
http://www.genusa.com (asp )
http://www.barreto.com.br
( asp )
http://www.aspalliance.com
http://www.asphole.com/asphole/default.asp
http://www.genusa.com/asp
http://unlockingasp.siteam.com
http://www.riopreto.com.br/asp98
http://www.takempis.com
http://everest.igc.ups.br
http://www.vallin.com/pub/1/asp1.asp
http://www.asptoday.com
http://www.aspbrasil.com.br
http://www.aspzone.com
http://www.tcp-ip.com

COLD FUSION

 

Cold Fusion é uma ferramenta de desenvolvimento de aplicações Internet e que você pode criar uma larga variedade de aplicações de páginas dinâmicas para comércio, comunicação, sites interativos e intranets.

Cold Fusion possui uma linguagem de marcação que roda no servidor e retorna código dinâmico html, dependendo da ação definida. Essas páginas executadas no servidor com extensão cfm ou cfml , têm os comandos normais html acrescentados de tags do cold fusion que serão processados pelo servidor, mas que não são enviados para o cliente.

A versão beta do Cold Fusion está disponível em http://www.allaire.com

SITES SOBRE COLD FUSION

http://milliways.stoneage.com/cf
http://rtb.home.texas.net/cf
http://www.houseoffusion.com
http://www.teamfusion.com
http://www.mapamundi.com.br:81/guest/RemoteListSummary/coldfusion_br
( Lista Brasileira de Cold Fusion )

 

COMO CRIAR UM BANCO DE DADOS NO ACCESS

 

1.    Abra o programa do MS Access

2.    Abrirá uma caixa de diálogo : Microsoft Access

3.    Clique em Banco de dados vazio

4.    Digite o nome do arquivo como alunos.mdb dentro da pasta Meus Documentos > Dados ou C:/Meus Documentos/Dados/alunos.mdb
sempre salvar o arquivo.mdb fora do FrontPage

5.    Clique  em Criar

6.    Abrirá uma caixa de diálogo com tipos de Banco de Dados que você pode criar : Tabelas ,  Consultas , Formulários , Relatórios , Macros e Módulos

7.    Selecione : Tabelas e clique em Novo

8.    Selecione item : Modo Folha de Dados

9.    Clique sobre Campo1 com o botão direito do mouse pressionado e selecione a opção Renomear Coluna

10.          Digite : Nome

11.          Clique sobre Campo 2 , repita o mesmo processo e digite : Endereco ( sem "ç ")

12.          Clique sobre Campo 3 , repita o mesmo processo e digite : Bairro

13.          Clique sobre Campo 4 , repita o mesmo processo e digite : Cidade

14.          Clique sobre Campo 5 , repita o mesmo processo e digite : UF

15.          Insira dados na tabela conforma mencionamos abaixo

16.          Salve como alunos.mdb

17.          Aparecerá uma caixa de diálogo para dar nome a tabela ;

18.          Digite : Alunos

19.          Clique OK

20.          Aparecerá uma mensagem sobre criação de chave primária

21.          Clique em Não

 

Nome

Endereco

Bairro

Cidade

UF

Antonio

Rua X

Copacabana

Rio de Janeiro

RJ

Carlos

Rua A

Itaim

São Paulo

SP

Maria

SQS 310

Asa Sul

Brasília

DF

Lorena

Rua 123

Setor Sul

Goiânia

GO

 

 

COMO CONFIGURAR O ODBC

 

ODBC  - Open Database Connectivity - Conectividade Aberta de Banco de Dados é um aplicado que cria recursos para conectar o banco de dados com outro programa que rode banco de dados

 

alunos.mdb <> ODBC <> asp

 

1.    Clique no botão Iniciar do Windows

2.    Clique em  Configurações > Painel de Controle

3.    Clique em ODBC 32 bits

4.    Clique em NFD do sistema ou System DSN

5.    Clique em Adicionar

6.    Selecione Microsoft Access Driver ( *mdb )

7.    Clique em Concluir

8.    No item Data Source Names ( Nome da Fonte de Dados ) digite : Alunos

9.    Clique em Select ( Selecionar )

10.                                                                                                                                      Procure C:\Meus documentos\Dados

11.                                                                                                                                      Clique em alunos.mdb

12.                                                                                                                                      Clique Ok e feche o Painel de controle

 

 

EXERCÍCIO 11 - ASP 1  - CONSULTA AO BANCO DADOS

 

Requisitos Básicos

Ø     Banco de Dados no Access , neste caso, Alunos ( alunos.mdb ) fora do site

Ø     Criar o arquivo consultar.asp  

Ø     Criar o formulário exer11.htm

 

 

 

CONSULTAR.ASP

 

1.    Abra o seu site no FrontPage

2.    Crie uma nova página como consultar.asp

3.    Digite : Resultado da Pesquisa

4.    Dê <enter>

5.    Insert > Database > Results
Inserir > Banco de Dados > Resultados

6.    Abrirá uma caixa : Database Region Wizard
Assistente  de Resultados de Banco de Dados

 

 

Step 1 (Etapa 1)

( x )use a new database connection

( x ) usar uma nova conexão de banco de dados existente

Selecione

use a new database connection

usar uma nova conexão de banco de dados existente

Create (Criar)

Add (Adicionar)

Name

Nome digite : Alunos

Type of Connection (Tipo de Conexão)

( x ) use an existing database connection

( x ) Fonte de Dados do sistema com Servidor Web
Browse (Procurar)

alunos.mdb Driver do Microsoft Access (*.mdb )
OK

Exibirá uma Caixa de Exibição :

? Alunos > selecione este item

Clique Verify

Verificar e será verificado o banco de dados com um marcador no lugar do ponto de interrogação

 

Observação : não esqueça que sempre para rodar o banco de dados é necessário que clique em Verify ( Verificar ) , se o banco de dados estiver com status ? , ele não irá rodar , deve estar o status de marcador

 

1.    Clique OK

2.    Observe que voltamos a Etapa 1 selecionado
(x ) use an existing database connection
( x ) Usar uma conexão de banco de dados existente

3.    Alunos

4.    Clique Next > Step 2
Próximo > Etapa 2

5.    Record Source
Fonte de Registro > será exibido Alunos

6.    Clique Next > Step 3
Próximo > Etapa 3

7.    Edit List
Editar Lista será exibido os campos do Banco de Dados
Clique em More Options
Mais Opções
No item Message to display if no records are returned
Mensagem a ser exibida se nenhum registro for retornado
digite : não foi encontrado nenhum registro

8.    Clique em Criteria (Critério)
Clique em Add
Adicionar e selecione Nome que será o item a ser pesquisado no Cadastro de Alunos
Clique Ok

9.    Clique Next > Step 4
Próximo > Etapa 4

10.                                                                                                                                      ( x ) Table - one record per row
Tabela - um registro por linha
No caso de usar tabela :
Use table border – Usar borda da tabela
Expand table to width of the page – Expandir tabela para largura da página
Include header row with column labels – Incluir linha de cabeçalho com nomes de coluna

11.                                                                                                                                      Clique Next > Step 5
Próximo > Etapa 5

12.                                                                                                                                      ( x ) Split records into groups
( x ) Dividir registros em grupos – caso tenha escolhido na etapa 4
Drop-Down Menu ( Menu Suspenso ) , este item não estará ativado

13.                                                                                                                                      Finish (Concluir)

 

14.                                                                                                                                      Observe que foi criado um formulário para nova consulta

15.                                                                                                                                      Clique com botão direito no botão Submit ( Submeter )
 e digite em Label ( Rótulo ) : Pesquisar Novamente

16.                                                                                                                                      Clique com botão direito no botão Reset  ( Redefinir )
 e digite em Label ( Rótulo ) : Limpar

17.                                                                                                                                      Salve sua página : consulta.asp

 

FORMULÁRIO DE CONSULTA A DADOS

 

1.    Crie uma nova página e salve como exer11.htm

2.    Digite centralizado e em negrito : Formulário de Consulta ao Banco de Dados

3.    Dê <enter>

4.    Cadastro de Alunos

5.    Dê <enter>

6.    Clique Insert > Form > One Line Text Box
Inserir > Form > Caixa de Texto de uma linha

7.    Pressione a tecla Home e digite : Nome :

8.    Clique com o botão direito do mouse pressionado : Form Field Properties
Propriedades do Campo de Formulário ao lado de Nome
no item Name 
Nome digite Nome
Clique OK

9.    Clique no botão Submit 
Submeter com o botão direito do mouse pressionado
Form Field Properties
Propriedades do Campo de Formulário 
No item Name 
Nome digite Pesquisar
Value/Label 
Valor/Rótulo digite Pesquisar 
Clique Ok

10.                                                                                                                                      Clique no botão Reset 
Redefinir com o botão direito do mouse pressionado
Form Field Properties
Propriedades do Campo de Formulário 
No item Name 
Nome digite Limpar 
Value/Label 
Valor/Rótulo digite Limpar

11.                                                                                                                                      Clique OK

12.                                                                                                                                      Clique no Formulário com o botão direito do mouse pressionado : Form Properties
Propriedades do Formulário

13.                                                                                                                                      Marque ( x ) Send to other 
( x ) Enviar para outra

14.                                                                                                                                      Clique em Options ( Opção )
No item Action ( Ação )  digite : consultar.asp
No item Method ( Método ) , selecione POST

15.                                                                                                                                      Clique OK , clique OK novamente

16.                                                                                                                                      Salve sua página como exer11.htm

17.                                                                                                                                      Teste o formulário

 

EXERCÍCIO 12 -  ASP 2 - INSERIR DADOS AO BANCO DE DADOS

 

Requisitos Básicos

Ø     Banco de Dados no Access , neste caso, Alunos ( alunos.mdb ) fora do site

Ø     Criar o arquivo inserir.asp  

Ø     Criar o formulário exer12.htm

 

INSERIR.ASP

 

1.    Abra o seu site no FrontPage

2.    Salve sua página como inserir.asp

3.    Digite : Seus Dados foram adicionados com sucesso !!!! Obrigado !!!

4.    Insira uma linha horizontal

5.    Clique no rodapé HTML
Digite :

<html>
<head>
<title>INSERIR DADOS AO CADASTRO</title>
</head>
<body>
<%
Dim Nome,Endereco,Bairro,Cidade,UF
Nome = request.form("Nome")
Endereco = request.form("Endereco")
Bairro = request.form("Bairro")
Cidade = request.form("Cidade")
UF = request.form("UF")

'***Declarando Conexões com Banco de Dados***
Set DB = Server.CreateObject("ADODB.Connection")
DataSource = "Alunos"
DB.Open DataSource,"Alunos",""

'***Insere Novo Aluno***
Comando = "INSERT INTO Alunos (Nome,Endereco,Bairro,Cidade,UF) " & _
"VALUES ('" & Nome & "','" & Endereco & "','" & Bairro & "','" & Cidade & "','" & UF & "')"
DB.Execute(Comando)

'***Lendo o registro recém-inserido***
Comando = "SELECT Nome FROM Alunos " & _
"WHERE Nome LIKE '" & trim(Nome) & "'"
Set RecSet = DB.Execute(Comando)
%>

<h2 align="center"><font color="#FF0000"><%= RecSet("Nome")%></font> </h2>
<h2 align="center"><font color="#000080"><strong>Seus Dados foram adicionados com sucesso !!!</strong></font></h2>
<h2 align="center"><font color="#000080"><strong>Obrigado !!!</strong></font></h2><hr width="90%">
</body>
</html>

6.    Salve sua página como exer12.htm

7.    Teste seu formulário

 

NOÇÕES SOBRE O ARQUIVO INSERIR.ASP

 

1.    Abre o script com o comando <%

2.    Crie uma variável chamada Dim e especifique todos os itens da tabela criada no Access :
Dim Nome,Endereco,Bairro,Cidade,UF

3.    Especique cada item a ser preenchido pelo usuário :
Nome = request.form("Nome")
Endereco = request.form("Endereco")
Bairro = request.form("Bairro")
Cidade = request.form("Cidade")
UF = request.form("UF")

4.    Declare a Conexão com Banco de Dados :
No item DataSource digite o nome que você deu na Tabela do Access
Set DB = Server.CreateObject("ADODB.Connection")
DataSource = "Alunos"
DB.Open DataSource,"Alunos",""

5.    Criar comando para inserir dados :
No comando INSERT INTO  digite o nome da Tabela do Access e depois todos os itens
No comando VALUES digite todos itens com as aspas '  "  & Item & " '
Comando = "INSERT INTO Alunos (Nome,Endereco,Bairro,Cidade,UF) " & "VALUES ('" & Nome & "','" & Endereco & "','" & Bairro & "','" & Cidade & "','" & UF & "')"
DB.Execute(Comando)

6.    Para ler o cadastro recém-inserido:
No comando SELECT digite o primeiro item da Tabela , nesta caso : Nome
No comando FROM digite o nome da Tabela do Access
No comando Where digite Nome e dentro dos parênteses :  Nome
Comando = "SELECT Nome FROM Alunos " & _
"WHERE Nome LIKE '" & trim(Nome) & "'"
Set RecSet = DB.Execute(Comando)

7.    Feche seu script com o comando %>

8.    Digite : <h2 align="center"><font color="#FF0000"><%= RecSet("Nome")%></font> </h2>
Para que seja exibido o Nome do Usuário Recém Registrado no arquivo asp.

 

FORMULÁRIO INSERIR DADOS

 

1.    Crie uma nova página e salve como exer12.htm 

2.    Digite centralizado e em negrito : Formulário para Inserir Novo Cadastro :

3.    Insira um linha horizontal

4.    Clique Insert > Form > One Line Text Box
Inserir > Formulário > Caixa de Texto de uma linha

5.    Pressione a tecla Home e digite : Nome :

6.    Clique com o botão direito do mouse pressionado : Form Field Properties
Propriedades do Campo do Formulário

7.    no item Name 
Nome digite Nome
No item Width in characters 
Largura em Caracteres mude para 40
No item tab order : 1
Clique OK

8.    Clique Insert > Form Field > One Line Text Box
Inserir > Formulário > Caixa de Texto de uma linha

9.    Pressione a tecla Home e digite : Endereco :

    Clique com o botão direito do mouse pressionado : Propriedades do Campo do Formulário
no item Nome
Nome digite Endereco
No item Largura em Caracteres mude para 40
No item tab order : 2
Clique OK

 

10.Clique em Inserir > Formulário > Caixa de Texto de uma linha

11. Pressione a tecla Home e digite : Bairro :

12.Clique com o botão direito do mouse pressionado : Propriedades do Campo do Formulário

13.no item Nome  digite Bairro
14.No item Largura em Caracteres mude para 40
No item tab order : 3
Clique OK

15.Clique em Inserir > Formulário > Caixa de Texto de uma linha
Pressione a tecla Home e digite : Cidade :

16.Clique com o botão direito do mouse pressionado: Propriedades.

17.No item Nome digite Cidade
18.No item Largura em Caracteres mude para 40
19.No item tab order : 4. Clique OK

20.Clique Inserir > Formulário > Caixa de Texto de uma linha
Pressione a tecla Home e digite : UF :

21.Clique com o botão direito do mouse pressionado : Propriedades

22.no item Nome digite UF
23.No item Largura em Caracteres mude para 02
No item tab order : 5. Clique OK

24.Clique no botão Submit (Submeter) com o botão direito do mouse pressionado: Propriedades do Campo do Formulário

25.No item Nome digite Enviar
26. Valor / Rótulo digite Enviar
27.No item tab order : 6. Clique Ok

28.Clique no botão Redefinir com o botão direito do mouse,Propriedades

29.No item Nome digite Limpar 
30.Valor/Rótulo digite Limpar
31.No item tab order : 7. Clique OK

32.Clique no Formulário com o botão direito do mouse pressionado:
Propriedades do Formulário
Marque ( x ) Send to other ( Enviar para outra )
Clique em Options ( Opção )
No item Action  ( Ação ) digite inserir.asp
No item Method ( Método ) digite POST

33.Salve sua página como exer12.htm

34.Teste seu formulário preenchendo com dados e depois abra no Accesss o arquivo alunos.mdb e veja os dados inseridos

 

JAVASCRIPT

 

 

NOÇÕES DE JAVASCRIPT

 

 

Comandos para JavaScript

 

<script language="JavaScript">

.............

</script>

 

Existem três opções para inserir JavaScript na página HTML :

Ø     1ª opção : O comando <script> vem entre os comandos <head> ......</head>

 

<html>

<head>

<script language="JavaScript">

.............

</script>

<title>Título da Página</title>

</head>

<body>

............

</body>

</html>

 

Ø     2ª opção :O comando <script> vem entre os comandos <body> ......</body>

 

<html>

<head>

<title>Título da Página</title>

</head>

<body>

<script language="JavaScript">

.............

</script>

............

</body>

</html>

 

Ø     3ª opção :O comando <script> vem entre os comandos <head> ......</head> e há também comandos dentro do comando <body ....... > ou entre o comando<body> ... </body>, como por exemplo : OnLoad , OnChange . etc.

 

<html>

<head>

<script language="JavaScript">

.............

</script>

<title>Título da Página</title>

</head>

<body OnLoad="teste">

............

</body>

</html>

 

Observação : Quando for inserir um JavaScript na sua página, observe como ele foi criado conforme uma das opções acima.

 

EDITOR DE JAVASCRIPT

 

No FrontPage 2000 vem um Editor de JavaScript chamado Microsoft Script Editor e para instalá-lo, siga os seguintes passos :

 

1.    Abra o FrontPage 2000

2.    Tools > Macro > Microsoft Script Editor
Ferramentas > Macro > Microsoft Script Editor

3.    Aparecerá uma mensagem que o editor não está instalado
Será solicitado que você insira o CD do FrontPage 2000 para instalá-lo

4.    Uma vez instalado, todas as vezes que quiser abrir o editor :
Tools > Macro > Microsoft Script Editor
Ferramentas > Macro > Microsoft Script Editor

 

Observação : Este editor para ser usado requer conhecimentos de JavaScript

 

Veja os Exemplos anexos :

 

JavaScript 1 -  Caixa de Opções de Links

JavaScript 2 -  Data e Hora

JavaScript 3 – Página Rolante

JavaScript 4 – Texto Rolante

JavaScript 5 – Menu Móvel

JavaScript 6 – Menu

 

DICAS DE SITES SOBRE JAVASCRIPT

 

 

 

http://javascript.internet.com

http://www.zdnet.com/devhead/resources/scriptlibrary

http://javascriptsource.com

http://www.docjavascript.com

http://www.javagoodies.com

 

JAVA

 

NOÇÕES DE JAVA

 

Comandos para Java :

 

Applets são pequenos progamas compilados codificados em Java e são inseridos em páginas HTML através do comando <applet> ... </applet>

 

Os atributos do comando Applet são :

 

Ø     applet - indica a inclusão de um progama de Java na página

Ø     codebase - a URL onde localiza o código Java . Se este é omitido, o o Codebase terá a mesma URL do documento

Ø     code - é o nome do applet incluído. A sua extensão é sempre .class , indicando ser um arquivo binário criado pelo compilador Java e gerado a partir de um arquivo-fonte codificado na linguagem Java

Ø     height - altura em pixel do applet

Ø     width - largura em pixel do applet

Ø     param - utilizado para passar parâmetros para o applet

Ø     name - nome do parâmetro

Ø     value - valour default do atributo

 

        A linguagem JAVA foi criada pela Sun MicroSystem voltada para aplicações multimídia para Internet e Intranet . Para executar programas em Java você precisa de alguns softwares : o primeiro JDK ( Java Developer Kit ) que contém um interpretador Java e um Editor de Java com seus applets, bibliotecas e helps.

Em outras palavras : você programa em Java um determinado arquivo ( vamos dar o nome fictício de micromania) e salva com extensão. java ; neste caso micromania.java . Depois através do JDK você compila todo o programa e ele se torna automaticamente com a extensão .class; neste caso micromania.class

Um programa em Java pode ter inúmeras páginas e quando compilado só o arquivo.class  será inserido no documento HTML; a fonte o arquivo.java permanece com o autor.

 

 

 

 

 

 

 

EXERCÍCIO 13  - APPLET 1 - NO FRONTPAGE 2000

 

No FrontPage 2000 vem dois applets : Banner Add Manager ( Gerenciador de Anúncios em Faixa )  e Hover Button ( Botão em Foco )

 

BANNER ADD MANAGER

 

1.    Abra o FrontPage 2000

2.    Clique na ferramenta Lista das Pastas (ao lado esquerdo da impressora)

3.    Selecione a pasta imagens

4.    Arquivo > Importar e importe três imagens de banner do mesmo tamanho
no nosso exemplo : banner1.gif , banner2.gif , banner3.gif

5.    Inserir > Componentes > Gerenciador de Anúncios em Faixa

6.    Abrirá a caixa de diálogo Propriedades do Gerenciador de Anúncios em Faixa
Largura: 300 ; Altura: 40
Efeito de Transição: Box In
Exibir cada figura por: 5 segundos
Link para: java.htm
Adicionar:  para adicionar as imagens do banner : observe que devem ficar imagens/banner1.gif , imagens/banner2.gif e imagens/banner3.gif

7.    Clique Ok

8.    Caso queira modificar o banner , clique com o botão direito do mouse
 Propriedades do Gerenciador de Anúncios em Faixa

9.    Salve sua página , quando salvá-la o FrontPage 2000 criará automaticamente uma cópia dos arquivos fprotate.class e fprotatx.class do banner ; para enviar esta página para o servidor é necessário enviar a página e também os arquivos fprotate.class e fprotatx.class

10. Clique em Visualizar no Navegador e teste o applet

 

HOVER BUTTON – BOTÃO EM FOCO

 

1.    Mantendo a página do exemplo acima aberta

2.    Dê <enter> após o banner

3.    Inserir > Componnetes > Botão em Foco

4.    Abrirá uma caixa de diálogo: Propriedades do Botão em Foco
Texto do Botão: Apresentação
Link para: apre.htm (que fizemos no capítulo dos frames )
Button Color: escolha uma cor para o botão
Efeito: Glow
Largura: 100; Altura: 20
Plano de Fundo: deixar como está
Efeito de Cor : escolha uma cor

5.    Clique OK e coloque o cursor ao lado do botão

6.    Inserir > Componnetes > Botão em Foco

7.    Abrirá uma caixa de diálogo : Propriedades do Botão em Foco
Texto do Botão ) : Pesquisa
 Link para: pesq.htm ( que fizemos no capítulo dos frames )
 Button Color: escolha uma cor para o botão
 Efeito: Glow
 Largura: 100;  Altura: 20
 Plano de Fundo: deixar como está
Efeito de Cor: escolha uma cor. Clique OK

8.    Salve sua página , quando salvá-la o FrontPage 2000 criará automaticamente uma cópia dos arquivos fphover.class e fphoverx.class do banner ; para enviar esta página para o servidor é necessário enviar a página e também os arquivos fphover.class e fphoverx.class

9.    Clique em Preview in Browser
Visualizar no Navegador e teste o applet

Observação : Para inserir novos outros applets , siga os seguintes passos 

 

1.    Arquivo > Importar e importe para a mesma pasta que estão os arquivos htm , o arquivo class

2.    Tenha em mão os parâmetros desta classe

3.    Inserir > Avançado > Miniaplicativo Java

4.    Applet Source ( Origem do Miniaplicativo): digite o arquivo.class
Largura; Altura
 Adicionar
 Nome - insira o parâmetro da classe
Valor
- insira o valor do parâmetro

Veja Exemplos de Java anexo :

 

Applet 2 – Texto Animado
Applet 3 – Banner Animado
Applet 4 – Texto em Movimento

 

DICAS DE SITES SOBRE JAVA

 

http://www.andyart.com/tips/java/tips_java.htm

http://www.intel.com/cpc/webapplets

http://www.gamelan.com

http://javadomain.com

http://javaboutique.internet.com

http://www.javasite.br.st

TEMAS DO FRONTPAGE 2000

 

 

NOÇÕES SOBRE TEMAS

 

     Temas são 60 modelos de páginas com papel de parede , linha horizontal, ícones e botões que podem ser aplicados nas suas páginas ou até mesmo modificá-los para se adaptar ao seu gosto

 

COMO INSERIR UM TEMA NO FRONTPAGE 2000

 

1.    Formatar > Tema
Aplicar Tema Para
Todos Arquivos
Página Selecionada

2.    Selecione o tema que queira usar

3.    Clique OK

 

 

COMO PERSONALIZAR UM TEMA NO FRONTAGE 2000

 

1.    Formatar > Tema
Aplicar Tema Para)
Todos Arquivos)
Página Selecionada)
Selecione o tema que queira usar

2.    Modificar Tema. Escolha os ítens que queira modificar
Cor
Gráficos
Texto

3.    Salvar Como e salve com o seu nome para ficar personalizado. Clique OK

 

 

D H T M L -  HTML DINÂMICO

 

NOÇÕES DE DHTML

 

DHTML - HTML Dinâmico é uma extensão da linguagem em HTML que permite a criação de efeitos para textos e imagens ; geralmente a maioria dos efeitos só são aceitos no Internet Explorer 4.0 ou superior e Netscape 4.0 ou superior

 

 

ESTILO

 

Ø     alterar parâmetro em VBScript ou JavaScript

Ø     alterar classe ou ID do elemento

Ø     alterar a CSS ( Folha de Estilo ) da página

 

Tipos de Eventos : onKeyDown , onMouseDown , onFocus , onLoad , onCharge

 

O parâmetro visibility permite exibir ou esconder objetos numa página :

object.style.visibility="visible"  ou
object.style.visibility="hidden"

 

 

 

DHTML NO FRONTPAGE 2000

 

O FrontPage 2000 trás alguns efeitos que podem ser acessados da seguinte forma : Efeitos de DHTML e Transições de Página

 

EFEITOS DE DHTML

 

1.    Formatar > Efeitos de HTML Dinâmico

2.    Em > Escolha um efeito

3.    Há quatro efeitos : 
Clique ) - inicia o efeito quando o usuário clicar uma vez sobre o elemento da página que estiver com o efeito
Clique Duplo) - inicia o efeito quando o usuário clicar duas vezes sobre o elemento da página que estiver com o efeito
Ao passar o Mouse Sobre ) - inicia o efeito quando o usuário passar o mouse sobre o elemento da página que estiver com o efeito
Carregamento da Página ) - inicia o efeito quando a página for carregada no elemento da página que estiver com o efeito

4.    Aplicar

5.    Configurações

6.    Remover Efeito
Realçar efeitos DHTML

 

Observações : Os efeitos de DHTML que vêm no FrontPage 2000 para textos são exibidos com um retângulo azul claro quando aplicados ; para copiar um efeito já aplicado na página > clique na ferramenta Format Painter ( Pincel ) e depois clique sobre onde queira utilizar o mesmo efeito

 

TRANSIÇÕES DE PÁGINA

 

     As transições de páginas são efeitos que são visualizados quando o usuário entra ou sai da página ; para aplicar estes efeitos siga os seguintes passos :

 

1.    Formatar > Transição de Página

2.    Evento

3.    Entrada da Página
Saída da Página
Entrada do Site
Saída do Site

4.    Efeito de Transição

5.    Duração

 

Exemplo :

 

1.    Crie uma página e salve como efeito2.htm

2.    Coloque uma cor de fundo da página

3.    Digite um texto

4.    Formatar > Página de Transição

5.    Entrada da Página
 Efeito de Transição
 Persianas Verticais
 Duração : 5 segundos

6.    Salve sua página

7.    Abra outra página e nela coloque um link para a página efeito2.htm e teste o efeito

 

Veja Exemplos de DHTML anexo

 

DHTML 1 – Mouse Over

DHTML 2 – Efeito que altera texto
DHTML 3 – Comando Layer
DHTML 4 – Classe em CSS
DHTML 5 – Link com descrição
DHTML 6 – Tabela com DHTML

 

DICAS DE SITES SOBRE DHTML

 

http://www.dhmtlzone.com

htttp://www.insideDHTML.com  

CSS – FOLHA DE ESTILOS

 

NOÇÕES DE CSS

 

 

CSS - Cascading Style Sheets ou Folhas de Estilo é uma extensão da linguagem em HTML que permite a criação de efeitos para textos e imagens ; geralmente a maioria dos efeitos só são aceitos no Internet Explorer 4.0 ou superior e Netscape 4.0 ou superior ; o código é incorporado numa única página, ou armazenado como um arquivo, ao qual todas as páginas do site farão referência.

CSS 2.0  que vem no FrontPage 2000 possui efeitos como caixas de posicionamento e sobreposição de camadas, mas antes de usar é recomendável testar estes comandos nos dois browsers antes de enviar sua página para Internet.

 

 

Para inserir Folha de Estilo no FrontPage 2000 há duas formas :

 

FOLHA DE ESTILOS EXTERNA

 

1.    Arquivo > Novo > Página > Folha de Estilo

2.    Normal
Folha de Estilo Normal

3.    Digita os comandos de CSS
Salva com extensão css

4.    Crie uma página em html

5.    Formatar > Vínculos de Folha de Estilos

6.    procure o arquivo com extensão css
clique OK

7.    Clique no rodapé HTML

8.    Observe que foi inserido entre <head> ... </head> o comando
<link rel ="stylesheet" href ="arquivo.css" type = "text/css">

 

FOLHA DE ESTILOS INTERNA

 

1.    Formatar > Estilo

2.    Estilos

3.    Novo

4.    Nome :  digite p ( vamos configurar os comandos em css para os parágrafos desta página )

5.    Formatar que tem as seguintes opções : Fonte, Parágrafo, Borda, Lista,  Posição, OK

6.    Clique no rodapé HTML

7.    Observe que foi inserido os comandos <style> ... </style>

 

 

EXERCÍCIO 17  - CSS 1

USANDO MODELOS DO FRONTPAGE 2000

 

1.    Arquivo > Novo > Página > Folha de Estilo
Arco - teste depois os outros exemplos
Neste exemplo tem comandos para links , tabelas e subtítulos ( h1 até h6 ) e o body 

2.    Salve com extensão css , exemplo : micromania1.css

3.    File > Página Nova > Geral > Página Normal

4.    Crie os títulos ( h1  até h6 )

5.    Crie um link

6.    Crie uma tabela
* Atenção : não coloque cor , nem alinhamento e nem propriedades à estes comandos , deixe que ao carregar a página, a folha de estilos externa ( micromania1.css ) assuma estas propriedades.

7.    Salve sua página , exemplo : exer17.htm

8.    Formatar > Vínculos de Folha de Estilos
micromania1.css. Clique OK

9.    Clique no rodapé HTML
Observe que foi inserido entre <head> ...
</head> o comando
<link rel ="stylesheet" href ="beto1.css" type = "text/css">

10.  Salve sua página e teste no browser

 

Veja Exemplos de CSS anexo

 

CSS2 – Links

CSS 3 – Classes em CSS

CSS4 – ID em CSS

 

DICAS DE SITES SOBRE CSS

 

http://www.w3.org

http://www.microsoft.com/workshop/author/css/css.zip

http://www.horus.com/comp/web/style/msstyle.html

 

 

MÚSICA

 

COMANDOS PARA INSERIR MÚSICA

 

     Para inserir música em uma página , usa-se o comando <embed> que é reconhecido pelo Netscape e o Internet Explorer. Exemplo :

<embed src = "arquivo.mid"   autostart ="true"  volume="100" width="144" height="15"  hidden="true" loop="1">

 

Ø     src="arquivo.mid" - nome do arquivo

Ø     autostart="true" - ela começa a tocar automaticamente tão logo seja carregado

Ø     volume="100" - altura do volume

Ø     width="144" - largura do painel de controle do som

Ø     height=15" -  altura do painel de controle do som

Ø     loop="1" - quantas vezes o som irá tocar

 

Observações :

 

Ø     se o valor de width ="0" e height="0" o painel de controle da música não será exibido

Ø     autostart="false ou true" ; executa ( true ) ou não ( false ) automaticamente o som sem a necessidade de se acionar a tecla play

Ø     loop"=true ou um valor inteiro" ; caso seja true , o som será executado continuamente até que o usuário mude de página. Se for um valor inteiro, o som será repetido este número de vez

Ø     startime="minutos:segundos" ; este atributo especifica o ponto de início da execução do arquivo de aúdio

Ø     endtime="minutos: segundos" ; detremina o tempo em que o som deve interromper a sua execução

Ø     volume="n" ; este valor percentual ( entre 0 e 100 ) especifica o volume do som

Ø     As extensões da música podem ser em mid , wav e avi

Ø     Existem comandos mais sofisticados para tocar música numa página , mas é necessário fazer scripts em JavaScript ou VBScript

 

 

COMANDO BGSOUND

 

Outro comando inserir música em uma página é o <bgsound> que é reconhecido somente pelo Internet Explorer. Exemplo :

<bgsound src="música.wav" loop=”infinitive”>

Ø     src="arquivo.mid" - nome do arquivo

Ø     loop"="infinitive" -  significa que a música tocará infinitamente enquanto o usuário estiver visitando aquela página

 

EXERCÍCIO 21 - MÚSICA 1 - COMANDO BGSOUND

 

1.    Clique sobre a página com o botão direito do mouse > Page Properties
Propriedades da Página

2.    Background Sound
Som de Plano de Fundo - procure o arquivo da música que queira inserir na página - neste exemplo candle_wind.mid que segue anexo

3.    Salve sua página como exer21.htm e teste no browser ;
exemplo só funciona no Internet Explorer

 

EXERCÍCIO 22 -  MÚSICA 2  - COMANDO EMBED

 

1.    Cria uma nova página

2.    Inserir > Avançado > Plugin

3.    Origem do Arquivo > clique em selecionar e procure o arquivo da música que queira inserir na página - neste exemplo candle_wind.mid que segue anexo
 ( x ) Esconder plugin

4.    Salve sua página como exer22.htm e teste no browser ;
este exemplo funciona nos dois browsers

 

EXERCÍCIO 23  - MÚSICA 3  -  LINK PARA MÚSICA

 

1.    Cria uma nova página

2.    Digite : Clique aqui para ouvir a música

3.    Selecione o texto > ferramenta Mundo de óculos para fazer link

4.    Procure o arquivo da música que queira inserir na página - neste exemplo candle_wind.mid que segue anexo

5.    Salve sua página como exer23.htm e teste no browser ;
este exemplo funciona nos dois browsers

 

DICAS DE SITES SOBRE MÚSICA

 

http://www.dkitchen.com

http://www.ctv.es/vsoft    ( músicas latinas e e brasileiras )http://www.halcyon.com/gmi

http://www.cris.com/~samira/music.htm

http://www.microsoft.com/musicproducer

http://www.studioland.com

http://www.cybersound.com

PUBLICAR SITE NA INTERNET

 

PUBLICAR USANDO FRONTPAGE 2000

 

Como selecionar arquivos para publicação

 

1.    Exibir > Relatórios > Status da Publicação

2.    Na coluna Publish
Publicar - observe que todas as páginas do site estão com Publicar

3.    Caso que não queira publicar determina página , selecione a coluna Publicar correspondente e escolha > botão direito do mouse Propriedades
 Grupo de Trabalho
 ( x ) Excluir este arquivo ao publicar o restante da Web

4.    Clique OK
Observe que na coluna estará assim :
 Não Publicar

 

Como publicar site via http

 

Para publicar HTTP - Hyperttext Transfer Protocol - Protocolo de Transferência de Hipertexto é necessário que as extensões do FrontPage 2000 estejam instaladas no servidor onde será hospedada o Site

 

1.    Arquivo > Publicar a Web

2.    Publicar somente páginas modificadas

3.    Publicar todas as páginas ...

4.    Caso queira inserir as pastas

5.    Subweb
SSL - Secure Sockets Layer - Camadas de Soquetes de Segurança que usa o protocolo HTTPS no servidor

6.    Selecione a pasta desejada

7.    Especificar o local para publicar sua Web
exemplo : http://www.servidor.com.br/site

8.    Clique em Publicar

 

Como publicar site via ftp

 

Para publicar um Site via FTP - File Transfer Protocol - Protocolo de Transferência de Arquivo , somente se as extensões estiverem instaladas no servidor onde será hospedada o Site

 

1.    Arquivo > Publicar a Web

2.    Publicar somente páginas modificadas

3.    Publicar todas as páginas ...

4.    Caso queira inserir as pastas
subweb
SSL - Secure Sockets Layer - Camadas de Soquetes de Segurança que usa o protocolo HTTPS no servidor

5.    Selecione a pasta desejada
Especificar o local para publicar sua Web
exemplo : ftp://ftp.servidor.com.br/site. Clique em Publicar

DIVULGAÇÃO DE SITE

 

SITES DE BUSCA NACIONAIS

 

 

dê - http://www.cade.com.br  

Radaruol - http://www.radaruol.com.br

Zeek - http://www.zeek.com.br  

Surf - http://www.surf.com.br  

Wsguide - http://www.wsguide.com.br  

Prokura - http://www.prokura.com.br  

Jaguatirica - http://www.jaguatirica.com.br  

Convert - http://www.convert.com.br  

BuscaWeb - http://www.buscaweb.com.br

Aonde - http://www.aonde.com.br  

BuscaNet - http://www.buscanet.com.br

Achei - http://www.achei.com.br  

Encontrei - http://www.encontrei.com.br   

 

SITES DE BUSCA INTERNACIONAIS

 

 

ESTADOS UNIDOS

 

Yahoo - http://www.yahoo.com

Altavista - http://www.altavista.com  

Infoseek - http://www.infozeek.com  

HotBot - http://www.hotbot.com   

 

PORTUGAL

 

AEIOU - http://www.sapo.pt

Sapo - http://www.sapo.pt

Cusco - http://www.cusco.pt    

 

 

DICAS DE DIVULGAÇÃO

 

 

SITE DE BUSCA COM 40 CADASTROS GRATUITOS

 

O site abaixo você preencha um cadastro e escolhe em mais de 40 sites de busca nacionais e internacionais onde queira divulgar seu site gratuitamente

http://www.mrmultimidia.com/webmaster

 

 

SITE DE ESTATÍSTICA DE ACESSO

 

O site abaixo você poderá ter estátistica de acesso do seu site gratuitamente : quantos visitantes , tipo de monitor usado pelo usuário , país de origem do usuário , porcentagem de visita dentro do site , browser utilizado , entre outros.

Preencha o formulário ( sign up )  criando um username ( nome do usuário ) e senha ; e receberá um email com um script que deverá inserir no seu site. Todas as vezes que um usuário entrar no seu site , será computada através deste script. Quando quiser saber a estatística de acesso do site , você entra no site da SuperStats e digita o username e senha

 

http://www.superstats.com

 

 

 

DICAS FINAIS

 

DOMÍNIO VIRTUAL

 

DOMÍNIO INTERNACIONAL

 

Exemplo : http://www.empresa.com e pode ser obtido em http://www.networksolutions.com  

Inscrição : US$ 70.00

Após dois anos : Taxa Anual : US$ 35.00

 

DOMÍNIO NACIONAL

 

Exemplo : http://www.empresa.com.br e pode ser obtido na FAPESP
- consulte seu provedor

Inscrição : R$ 100,00

Após dois anos : Taxa Anual : R$ 50,00

 

DOMÍNIO CANÔNICO

 

Exemplo : http://www.provedor.com.br/empresa

 

DICAS FINAIS

 

Antes de iniciar um projeto do Site deve-se preocupar com os seguintes itens :

 

Como atrair a atenção do usuário

 

Ø     Evitar excessos – A primeira coisa que vem na cabeça é usar todos os recursos possíveis , mas se ela tiver um belo visual e não conter informações que chamem a atenção do usuário

Procurar equilíbrio

 

Ø     A primeira página aparece rapidamente

Ø     Objetivo do Site está claro e rápido

Ø     Site está bem escrito

Ø     O Visual do Site está equilibrado

Ø     Os links apresentam exatamente para que o usuário possa navegar pelo seu Site facilmente

Ø     Foram atingidos os objetivos do Site

 

Conteúdo do Site e seu Visual

 

Ø     Procure usar links de fácil navegação para o usuário

Ø     Não use imagem como background dificulte a visualização dos textos

Ø     Evite criar páginas muito longas

Ø     Padronize o visual do site em todas as páginas

Ø     Procure usar imagens pequenas para evitar a demora da visualização da página

Ø     Faça descrição detalhada de todas imagens através do comando alt

Ø     Faça a correção ortográfica

Ø     Teste seu Site antes de enviá-lo para seu Servidor , de preferência nos dois browser mais usados : Internet Explorer e Netscape

Ø     Caso a página esteja no ar em fase de Teste : não esqueça de colocar um comentário : Página em Construção