Baixe Manual de Criação de Páginas Web Usando FrontPage 2000: Tabelas e Quadros e outras Notas de estudo em PDF para Informática, somente na Docsity!
Front Page 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
Front Page 2000
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
- File > Open Web Arquivo > Abrir Web e abra seu site
- File > New > Page Arquivo > Novo > Página
- File Arquivo > Save As Arquivo > Salvar Como
Front Page 2000
- 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%
- Preencha a tabela com alguns dados
- Selecione toda a tabela e centralize os textos
- 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
- Clique abaixo desta tabela e clique em e insira uma tabela 1 linha x 1 coluna
- Clique sobre a tabela com o botão direito do mouse > Table Properties Propriedades da Tabela
- 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
- Clique abaixo desta tabela invisível e clique em Insert Table (Inserir Tabela)e insira uma tabela 2 linhas x 2 colunas
- Clique sobre a tabela, botão direito do mouse, Propriedades da Tabela
- 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%
- Selecione somente a segunda coluna toda e clique em Mesclar as células
- Preencha a tabela com alguns dados
- Selecione toda a tabela e centralize os textos
- Insira outra tabela invisível abaixo de 15 pixels de altura
- Clique abaixo desta tabela invisível e clique Inserir Tabela e insira uma tabela 4 linhas x 4 colunas
- Clique sobre a tabela com o botão direito do mouse > Propriedades da Tabela
- 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%
- Preencha a tabela com alguns dados
- Clique na ferramenta Cor de Preenchimento e pinte toda a primeira linha de uma cor
Front Page 2000
- Inserir > Linha Horizontal ( com 90% de largura )
- Digite centralizado : Seu Nome : Inserir > Símbolo > e escolha © ; 1999 ; ficando assim Seu Nome © 1999 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
- Clique no disquete para salvar sua página
- Clique em Visualizar no Navaegador
FRAMES SEM BORDAS USANDO O FRONTPAGE 2000
- Abra a página principal do frame
- Clique com o botão direito do mouse e selecione Propriedades do Quadro
- Clique no item Página de Quadros > Quadros
- Desmarcar item Mostrar Bordas. Clique OK
EXERCÍCIO 6 - FRAMES NO FRONTPAGE 200 0
- Abra o FrontPage 2000
- File > Open Web Arquivo > Abrir Web e abra o Site que esteja trabalhando
- File > New Page > Frame Page Arquivo > Nova Página > Página de Quadros
- Selecione : Contents Conteúdo
- Será exibido um frame com duas colunas
- Clique na coluna da esquerda
- 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
- 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 )
- Clique no rodapé Frame Page HTML HTML de Página de Quadros
- Entre o comando .... digite o título da página, neste exemplo: Empresa X
- Retire as duas linhas seguintes para deixar seu código html limpo
- Mantendo ainda aberta os códigos do Frame Page HTML HTML de Página de Quadros
Front Page 2000
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 ****
- observe que a página que irá rodar será : apre.htm ; logo o alvo para os links será target=”apre”
Empresa X
Esta página usa quadros mas seu navegador não aceita quadros.
- Clique no rodapé : NORMAL
- Feche a página exer6.htm
- Crie duas outras páginas simples : a primeira serv.htm ( Serviços ) e a Segunda clientes.htm ( Clientes ) e digite alguma coisa nelas
- Abra a página apre.htm
- Retire a palavra apre e digite alguma coisa nela
- Clique no rodapé HTML Title Título digite : Apresentação Observe que o FrontPage 2000 colocou antes do comando ; **** , pois será a página que irá rodar
- Abra a página menu.htm
- Retire a palavra menu
- Coloque uma cor como fundo da página
- Digite : Apresentação dê
- Digite : Serviços dê
Front Page 2000
- Digite : Clientes
- 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 )
- 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 )
- 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 )
- Salve sua página
- Abra a página exer6.htm
- Clique no ícone Preview in Browser Visualizar no Navegador
- Teste os links
EXERCÍCIO 7 - FRAMES NO FRONTPAGE 2000
- Abra o FrontPage 2000
- File > Open Web Arquivo > Abrir Web e abra o Site que esteja trabalhando
- 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
- Clique na coluna da esquerda
- 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
- 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 )
Front Page 2000 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
- Clique no disquete para salvar
- 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
- Clique no disquete para salvar
- 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 ****
- observe que a página que irá rodar será : intro.htm ; logo o alvo para os links será target="intro"
Empresa Y
Front Page 2000 noresize>
Esta página usa quadros mas seu navegador não aceita quadros.
- Clique no rodapé : NORMAL
- Feche a página exer7.htm
- Crie duas páginas simples : a primeira pesq.htm ( Pesquisa ) e a Segunda promo.htm ( Promoções ) e digite algum conteúdo.
- Abra a página intro.htm
- Retire a palavra intro e digite algo emn seu lugar.
- Clique no rodapé HTML
- Title ( Título digite) : Introdução Observe que o FrontPage 2000 colocou antes do comando ; **** , pois será a página que irá rodar
- Abra a página indice.htm
- Retire a palavra indice Coloque uma cor como fundo da página
- Digite : Introdução dê Digite : Pesquisa dê Digite : Promoção
- 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 )
- 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 )
- 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
- Salve sua página
- Abra a página logo.htm
Front Page 2000
HIT COUNTER – CONTADOR DE ACESSO
- Insert > Component > Hit Counter Inserir > Componente > Contador de Acessos
- Selecione o tipo de contador
- Defina se o contador iniciará do zero ou outro número
- Defina o número de dígitos fixos
- Clique OK
- 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
- Insert > Component > Confirmation Field Inserir > Componente > Campo de Confirmação
- 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
- Insert > Component > Include Page Inserir > Componente > Página de Inclusão
- Este componente incluir uma página dentro de outra página
- Selecione a página que queira incluir
- Clique OK
- 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
- Insert > Component > Search Form Inserir > Componente > Formulário de Pesquisa
- Search Form Properties Propriedades do Formulário de Pesquisa
- Label ( Rótulo ) : Pesquisar
- Width ( Largura em Caracteres ) : 40
- Label Start Search Button Rótulo do Botão Iniciar Pesquisa - Pesquisar agora
Front Page 2000
- Label Reset Button Rotúlo do Botão Limpar – Limpar
- 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 é ** ...**
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
A senha será de até 6 caracteres que serão exibidos por asteriscos ; mesmo que o valor default value esteja representado por asteriscos, o
Front Page 2000
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
- Send to ( Enviar Para) - rodar o formulário no Webbot – programa que vem junto ao FrontPage 2000
- Send to database Enviar para Banco de Dados – rodar o formulário em Banco de Dados
- Send to other Enviar para outro – rodar o formulário com outro programa
EXERCÍCIO 8 - FORMULÁRIO 1 – USANDO WEBBOT
- File > New Page Arquivo > Nova Página
- Salve como exer8.htm
- View > Toolbars > Table Exibir > Barra de Ferramentas > Tabela
- Digite centralizado : FORMULÁRIO 1 ( usando heading 1 )
- Insira uma linha horizontal de 90% de largura
- Digite centralizado : Por favor , preencha o formulário abaixo
- Dê e ponha o cursor com alinhamento à esquerda
- Insert > Form > One Line TextBox Inserir > Formulário > Caixa de texto de uma linha
- 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
- Vamos criar um formulário com tabela , para que a diagramação fique mais bem apresentada
- 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 )
- Dê dois
- Observe que parte do formulário desceu
- Clique na tecla das setinhas e suba o cursor do mouse duas vezes
- Insira uma tabela de 2 colunas x 7 linhas
- 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
Front Page 2000 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%
- Selecione somente a segunda coluna > Cell Properties Propriedades da Célula Specify Width ( Especificar Largura ) : 80%
- Digite na primeira linha da primeira coluna : Nome
- Clique na primeira linha da segunda coluna Insert > Form > One Line TextBox Inserir > Formulário > Caixa de texto de uma linha
- Digite na segunda linha da primeira coluna : Email
- Clique na segunda linha da segunda coluna Insert > Form > One Line TextBox Inserir > Formulário > Caixa de texto de uma linha
- Digite na terceira linha da primeira coluna : Endereço
- Clique na terceira linha da segunda coluna Insert > Form > One Line TextBox Inserir > Formulário > Caixa de texto de uma linha
- Digite na quarta linha da primeira coluna : Cidade
- Clique na quarta linha da segunda coluna Insert > Form > One Line TextBox Inserir > Formulário > Caixa de texto de uma linha
- Digite na quinta linha da primeira coluna : Estado
- Clique na quinta linha da segunda coluna Insert > Form > One Line TextBox Inserir > Formulário > Caixa de texto de uma linha
- Digite na sexta linha da primeira coluna : Cep
- Clique na sexta linha da segunda coluna Insert > Form > One Line TextBox Inserir > Formulário > Caixa de texto de uma linha
- Selecione a sétima linha toda
- Clique no ícone Merge Cells Mesclar Células
- Observe que as duas células da sétima linha se transformaram em uma linha
- Mantendo o cursor dentro da sétima linha Insert Rows Inserir Linhas clicando 12 vezes
- 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
- Clique na oitava linha e ponha o cursor centralizado
- Digite : Críticas e Comentários
Front Page 2000 e com uma altura de 15 pixels que melhora sensivelmente a diagramação do formulário
- Clique na décima sétima linha e ponha o cursor centralizado 67. Digite : Escolha seu time de futebol dê dois espaços Insert > Form > DropDown Menu Inserir > Formulário > Menu Suspenso
- 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
- Clique na décima nona linha e ponha o cursor centralizado
- Copie os botões submit e reset e coloque nesta linha
- Delete uma Caixa de texto de uma linha que ficou do lado de fora da tabela
- 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
- 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
- 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
- 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
- Selecione a Caixa de texto ao lado de Estado Form Field Properties Propriedades do Campo do Formulário Name : Estado
Front Page 2000 Width in Characters ( Largura em caracteres ) : 02 Tab Order ( Ordem do Dado ) : 5
- 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
- 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
- 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
- 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
- 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
- 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
- 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
