Escolar Documentos
Profissional Documentos
Cultura Documentos
COMO Construir HomePage
COMO Construir HomePage
INTRODUO
OBJETIVOS DO CURSO
Dar uma viso geral da arquitetura WEB Instalar e Configurar o FrontPage 98 Criar e Gerenciar Sites da WEB Criar e Editar Pginas da WEB
1. Conceitos Fundamentais
Relao Browser x Servidor Web
SITE W.W.W
TCP?IP + HTTP
Computador Servidor rodadndo um Software servido de Rede (IIS, EMTERPRISE SERVER, WEB SITE, APACHE etc,)
Lado Servidor:
a)Personal Web Server - Servidor Web de baixa capacidade Front Page Server Extensions. b)Programas especiais instalados no servidor Web que garantem toda a funcionalidade do FrontPage. Sem as extenses do FrontPage98 instaladas no servidor, alguns componentes no funcionaro em pginas construidas com o FP98.
Voc poder baixar as extenses do FP98 gratuitamente do endereo: http://microsoft.com/frontpage/wpp/exts.htm Para informaes detalhadas sobre as extenses visite: http://www.microsoft.com/frontpage/wpp/serk/default.htm Quando da instalao do Front Page98 em sua mquina, criado um ambiente WEB. O servidor Personal Web Server instalado e o seu diretrio raiz : C:\FrontPage Webs\Content\ - Pasta onde ficam todos os Sites criados no FrontPage98. Hostname:80 (hostname o nome de sua mquina). Para um Site funcionar corretamente, este dever ser instalado (publicado) abaixo desse diretrio raiz do Servidor WEB.
OBS. Voc poder tambm criar sua pgina em qualquer local do disco e posteriormente transferir (publicar) para um diretrio abaixo do diretrio raiz do Servidor, como explicado anteriormente
Outros Diretrios do FrontPage98 C:\FrontPage Webs\Server Neste Diretrio encontra-se instalado o Servidor de WEB do Front Page:
Microsoft FrontPage Personal WEB Server (Vhttp32.exe - Servidor Web)
C:\Arquivos de programas\Microsoft FrontPage\Bin Nesta Pasta esto instalados todos os Programas do Pacote do FrontPage Entre eles: a)FrontPage Editor (fpeditor.exe) b)FrontPage Explorer (fpexplor.exe) c)FrontPage Server (Administrao e Configurao do Servidor) (fpsrvwin.exe) d)FrontPage Server (Atalho para rodar o Servidor) (vhttpd32.exe) Amaro Evaldo de Deus Pgina 2/34
1.Imagens/ Fundos e Clips http://www.microsoft.com/clipgallerylive http://microsoft.com/gallery/files/images/default.htm 2.Texturas e Backgrounds: http://www.sfsu.edu/~jtolson/textures/textures.htm http://www.meat.com/textures 3.Som nas Paginas: http://www.deol.ru/~queen/jalfrezi/tnt.htm 4.Streaming de audio e video: http://www.microsoft.com/ntserver/netshow http://www.real.com (Real audio e real vdeo) 5.Programas CGIs para Formulrios e Bases de Dados. Programao CGI http://www.builder.com/programiming/cgi 6.Programao em Perl http://www.builder.com/programming/perl 7.Acesso a base de dados http://www.builder.com/programming/databases 8.Base de Dados usando ASP da Microsoft http://support.microsoft.com/support/kb/articles/q175/7/70.asp 9.Base de Dados usando Cold Fusion http://www.allaire.com
2. O FrontPage Explorer
O Front Page Explorer o ponto de partida para a criao de um Site.
Voc poder usar diretamente o FrontPage Editor, mas no ter uma ferramenta para gerenciar e automatizar todo o seu Site. Com o Front Page Explorer voc poder visualizar a estrutura hierrquica do Site, inserir novas pginas automaticamente no Site, publicar o Site em um Provedor da Internet. Quando uma nova Pgina inserida no Site pelo Explorer, automaticamente ser incluida um boto de navegao na barra de botes compartilhado. (Shared Border). Quando voc inicia o FrontPage Explorer a janela principal mostrada.
A Janela Principal formada pelas seguintes partes: Barra de Menus Barra de Ferramentas Area de visualizao Barra Views - esquerda Amaro Evaldo de Deus Pgina 4/34
Atravs do FrontPage Explorer voc poder tambm: Abrir um Site Existente Visualizar um Site de diversos modos atravs da Barra View esquerda Amaro Evaldo de Deus Pgina 5/34
Barra View
Barra de Botes de Visualizao do FrontPage Explorer.
File
New Page - Cria uma nova pgina no WebSite corrente Task - Cria uma nova tarefa para a janela de tarefas Folder - Cria uma nova pasta. Open FrontPage Web - Abre um Site existente Close FrontPage Web - Encerra um Site que est aberto. Amaro Evaldo de Deus Pgina 7/34
Edit
Opes de Edio Padro. Opes de visualizao correspondentes as da Barra de Visualizao. Rotate - Inverte a orientao horizontal/vertical do diagrama de navegao Size to Fit - Ajusta o diagrama ao tamanho da Tela. Reflesh - Atualiza a exibio do Site aps qualquer alterao em uma Pgina (F5).
View
Tools
Spelling - Palavras para pesquisa no Dicionrio. Amaro Evaldo de Deus Pgina 8/34
3. O FrontPage Editor
O Front Page Editor o ambiente de criao ou edio de Pginas. Ele pode ser ativado do FPExplorer ou isoladamente. Opes da Barra de Menu
File
New Cria uma Nova Pgina ou um novo de Frame de Pgina, em branco ou usando um dos mais de 60 modelos de Pginas que o Front Page98 dispe. Se escolher um dos modelos, poder posteriormente editar e alterar a Pgina. Preview in Browser Mostra a Pgina como funcionaria em um Browser. Page Properties Define as propriedades da Pgina.
Edit
View
Insert
Opes para inserir diversos componentes na Pgina, Linhas, Figuras, Componentes Ativos, Banco de Dados, Formulrios, Tabela de Contedo do Site e Barra de Navegao. Uma Barra de Navegao, quando inserida no Site automatiza a navegao pelas diversas Pginas que compe o Site.
Barra de Navegao As Barras de Navegao podem ser colocadas na borda Horizontal ou Vertical, em forma de botes ou texto, Os botes da Barra de Navegao apresentados so os relativos ao Tema escolhido para a Pgina ou Site. Os Botes de Navegao podem apresentar as opes de navegao para os diversos nveis hierrquicos, como mostra a figura. Os Componentes e Elementos Ativos so programas automatizados inseridos na Pgina. Os Componentes e Elementos Ativos sero vistos posteriormente
Format
Pargrafo, Fontes, Animao e Temas A Formatao de Temas permite inserir um Tema na Pgina ou no Site Todo. Um Tema um padro ou estilo de texto, figuras, fundo, linhas, marcadores para a Pgina ou para todo o Site. O FrontPage98 dispe de mais de 40 Temas diferentes, que embelezam e do um toque especial ao Site.
Para Definir um Tema para o Site ou para a Pgina use o FrontPage Explorer, o Menu Format do FrontPage Editor, ou o Boto direito do Mouse na Pgina. o Com o Boto direito do Mouse na Pgina podemos tambm definir as propriedades da Pgina e da Borda Compartilhada.
Tools
Ferramentas de Verificao ortogrfica Shared Border o Shared Border so bordas compartilhadas inseridas na pgina ou em todo o Site, atravs dessas bordas se colocam as barras de navegao do Site.
Table
Frames
Opes para utilizao de Frames no Site. No rodap das Pginas aparecem 3 abas que seleciona o modo de exbio da Pgina: Normal, HTML que mostra o cdigo da Pgina e Visualizao (como ficaria em um Browser).
Inserindo Hyperlinks
Um HyperLink uma ligao de um ponto a outro na mesma Pgina ou em um lugar qualquer da Internet. O ponto de ligao poder ser um texto, uma figura ou um objeto qualquer que aceite hyperlink. Para Inserir um Link em um determinado ponto da Pgina, selecione o texto ou o Objeto, Amaro Evaldo de Deus Pgina 12/34
GIFs Animados. uma combinao de vrios arquivos Gifs em um nico. Programas Grficos so especializados em construir esses arquivos. Coleo On-Line de Arquivos GIFs animados. Incluindo Grficos do Clip Art do FrontPage e do MS Office No FrontPage Editor selecione Insert | Imagem ou Clipart A Janela Image ou Clip Art ser exibida para a escolha do Grfico. Editando Imagens com a Barra de Ferramenta Image Exibindo a Barra de Ferramenta Image Insira uma Figura na Pgina Clique na figura. A Barra Imagem aparece na parte inferior da Pgina.
Obs. Alm desta poderosa ferramenta de edio de imagem do FrontPage98 voc poder usar o Programa Image Composer que acompanha o FrontPage98 para criar e editar imagens com mais recursos, ou outro programa grfico qualquer como Paint Shop pr, Photo Shop, Fire Work etc. Criando Mapas de Imagens Mapas de Imagens so imagens com diversas reas clicveis, cada uma delas apontando para uma URL ou hyperlink. Por exemplo o Mapa do Brasil em que cada estado aponta para o Link correspondente. Pegue uma Imagem e selecione as partes clicveis com as ferramentas 2, 3 ou 4. Especifique o hyperlink para cada rea clicvel definida. Ilumine a rea selecionada com a ferramenta 5. Pronto. Mapa de Imagem
Elementos Ativos
So comandos incorporados que acrescentam efeitos especiais interessantes e teis sua Home Page. Eles s existem no Front Page e constituem um conjunto de ferramentas que tornam a sua Pgina Interativa.Os Elementos Ativos do FrontPage, so
programas escritos em Java ou em CGI
Os Elementos Ativos do Front Page so: 1. Hover Buttons - Botes Animados 2. Banner Ad Manager - (LogoTipo Animado) 3. Marquees - Letreiros Luminosos 4. Site Searching - Pgina de Procura de Contedo no Site. 5. Hit Counter - Contador de Acessos Pgina. OBS. Os Elementos Ativos escritos em Java podem funcionar sem as extenses do Front Page instalados no Servidor WEB onde ficar hospedada o Site construdo, desde que o programa (Classe) em java seja includo. O programa em Java (Classe) criado automaticamente pelo Front Page. Porm os elementos ativos escritos em CGI necessitam das extenses no servidor para funcionarem.
Button text - Texto que ir aparecer no Boto Font - Estilo da Fonte Link to - Link para quando clicar no Boto Button Color - Cor Inicial do Boto Effect - Efeito visual que ocorrer no Botal quando da passagem do mouse sobre o mesmo Effect color - Cor de preenchimento ou do efeito do Boto Width e Height - Tamanho do Boto Opo Customizada - Novas Opes de efeitos de Som e Imagens sobre o Boto.
On click Faz tocar um som quando clicar no Boto On hover Faz tocar um som quando passar o mouse sobre o Boto Obs. O arquivo de som dever ser do tipo au ou snd. Imagens - altera a imagem do Boto.
Banner Ad Manager
um programa Java (Applet) um conjunto de imagens rolveis.
Width e Height - Largura e altura do cartaz. Transition - Efeitos especiais de transio entre uma imagem e outra Link to - Especificao do Link para a Figura ou Cartaz Imagens to Display O conjunto de imagens que sero mostradas, clique no boto ADD para adicionar uma outra imagem. Obs. As imagens devem ser Gif ou Jpg e devem ter todas o mesmo tamanho. Voc poder fazer cada imagem em um programa Grfico Paint Shop Pr, ou Image Composer. Show Image for (second) - tempo de exposio de cada imagem em segundos.
Marquees
uma Tag em HTML da Microsoft, no um programa em Java nem CGI, portanto s funcionar no Internet Explorer. Existem Programas em Java e em JavaScript para Letreiros que funcionar tanto no Internet Explorer quanto no NetScape. Amaro Evaldo de Deus Pgina 21/34
Janela Search Form Proprierties O Elemento Ativo Search Form um programa CGI que roda no Servidor, portanto necessita das Extenses do Front Page para funcionar. Informe:
Label for input - Texto para pesquisa Tamanho do Texto Amaro Evaldo de Deus Pgina 22/34
Hit Counter
um contador de Acessos Pgina.
Selecione um dos tipos da caixa de dilogo. Reset counter to - Determina o nmero inicial para a contagem de acessos Fixed number of digit - Determina o nmero de dgitos do contador O Contador um programa que usa CGI e necessita das extenses do FrontPage no Servidor.
Caixa de Validao do Campo OBS. O processo se repete para o todos os campos inseridos no formulrio. 1. Inserir um Campo 2. Alterar as propriedades do Campo 3. Validar o Campo Procedimento para enviar os Dados do Formulrio. Aps ter sido criados todos os campos do Formulrio e de termos definido suas propriedades e validaes, precisamos enviar os dados para serem processados pelo Servidor de WEB atravs de CGI. Amaro Evaldo de Deus Pgina 26/34
Caixa de Propriedades do Formulrio Enviar os Dados para um arquivo ou Endereo de E-mail Se for para um Arquivo informe o nome do Arquivo e o seu caminho no campo File Name. Se for para um Endereo de E-mail informe o endereo no campo E-mail Address. Obs. O Servidor WEB onde ficar sua pgina dever estar apto a processar formulrios do FrontPage. O Campo Send to Other - Enviar para outros - significa que poderemos enviar nossos dados para serem processados por Scripts CGIs e ASP para integrao com Banco de Dados, (Comercio Eletrnico).
Propriedades da tabela.
Linhas, Colunas, Alinhamento, Bordas, espao entre a borda e o texto, espaamento entre as clulas, e o tamanho da tabela em Pixel ou em percentual da janela principal. Aps ter criado sua Tabela, poder alterar suas propriedades.
Propriedades da Tabela
Voc poder tambm alterar as propriedades da clula. Veja a Janela de Propriedades de Clulas abaixo
Janela de Propriedades da Clula Cor das Bordas - Borda da Clula, externa e interna. Mesclar Linhas - Cell Span - Number of Rows Spanned Quantas linhas uma clula poder mesclar. Clula A Clula B
Clula
Uma Clula atravessando duas Linhas Mesclar Colunas - Cell Span - Number of Columns Spanned Quantas Colunas uma Clula poder mesclar. Clula A B C
Uma Clula atravessando trs Colunas Amaro Evaldo de Deus Pgina 31/34
9. PRTICA
Vamos criar um Site Completo para publicao na WEB.
1. Execute o FrontPage Explorer 2. a)Na primeira Janela que aparecer escolha cirar um Novo Site de uma Pgina. b)Especifique o Ttulo do Site c) Especifique a pasta d)Crie novas Pginas no Menu File New, ou no boto new ba Barra de Ferramentas. Procure montar a Estrutura de Site mostrada na figura abaixo. e)Renomeie os arquivos htm para os nomes da figura, renomeie os Ttulos das Pginas. f)Na Janela View, escolha a Visualizao de Temas e escolha um Tema para o Site. g)No Menu Tools, especifique a Shared Border (Borda Compartilhada) para exibio dos Botes de Navegao.
OK a Estrutura do Site j est montada. um Site com recursos automatizados, utilizando um Tema nico, com barra de Botes de Navegao. Agora vamos a tarefa de Editar cada Pgina, personalizado o Site, pgina a pgina. Execute o FrontPage Editor, pelo menu Tools, pela barra de tarefas do FrontPage Explorer, ou dando clique duplo no retngulo da pgina no diagrama de estrutura do Site. Em cada uma das Pginas faa a seguinte tarefa: 1. Insero de Textos Digite o texto de sua preferncia, formate, coloque marcadores, linhas, plano de fundo. 2. Insero de Imagens Insira Imagens, Gifs animados etc. Insira um Logotipo Animado (Banner), Menu Insert Active Elements Banner Ad Manager, escolha as Figuras. 3. Insero de Elementos Ativos e Componentes Contador de Pgina Marquee Hover Button Formulrio de Pesquisa no Site 4. Insero de Tabelas Faa uma Diagramao (layout) para um Texto com Figuras e Fotos, Crie a Tabela e insira os textos e fotos Amaro Evaldo de Deus Pgina 33/34