UNIVERSIDADE FEDERAL DO PARANÁ CENTRO DE COMPUTAÇÃO ELETRÔNICA DIVISÃO DE SUPORTE TÉCNICO

Transcrição

1 FrontPage 98 Web Design II Página 3 Sumário INTRODUÇÃO... 4 CARACTERÍSTICAS IMPORTANTES DO FRONTPAGE Criando web sites atraentes com o Assistente de Criação Inteligente... 5 Gerenciando a estrutura e o conteúdo do web site... 5 Integrando o conteúdo existente com outros aplicativos familiares... 6 CONTROLANDO IMAGENS COM O FRONTPAGE CRIANDO MAPA DE IMAGENS CLICÁVEIS COM O FRONTPAGE CRIANDO EFEITOS COM O MICROSOFT IMAGE COMPOSER... 8 Objetos de Imagem... 9 Transparência... 9 Ciclo de Trabalho Alterando Cores Fazendo Recortes Criando Sombras INCLUINDO ELEMENTOS ATIVOS OU EFEITOS ESPECIAIS COM FRONTPAGE HOVER BUTTONS Botões Customizados Adicionando efeitos de som para os Hover Buttons Uploading the Hover Button Applet Outras considerações sobre hover buttons BANNER AD MARQUEE HIT COUNTER ANIMAÇÃO DE ELEMENTOS DA PÁGINA EFEITOS DE TRANSIÇÃO DE PÁGINA PAGE BANNERS COMPONENTE INCLUDE PAGE COMO UTILIZAR O COMPONENTE INCLUDE PAGE USANDO FOLHAS DE ESTILO NO FRONTPAGE ASSOCIANDO A FOLHA DE ESTILO DO FRONTPAGE A OUTRA PÁGINA CASCADING STYLE SHEETS (CSS) NO FRONTPAGE INSERINDO MULTIMÍDIA COM O FRONTPAGE INTERATIVIDADE NA WEB COM FRONTPAGE TRABALHANDO COM FORMULÁRIOS Campos Text Box Campos Radio Button Campos Check Box Campos Drop-Down Menu Campos Push Button ACTIVE SERVER PAGES (ASP) ACTIVE SERVER PAGES (ASP) COM FRONTPAGE CONECTIVIDADE COM BANCO DE DADOS USANDO ASP E ADO O Objeto RecordSet O Objeto Command O Objeto Connection ACESSANDO BANCO DE DADOS ACCESS COM FRONTPAGE 98 USANDO ASP Como mostrar o conteúdo de um banco de dados Access usando FrontPage 98 e ASP Como inserir informação em um banco de dados Access usando FrontPage 98 e ASP REFERÊNCIAS BIBLIOGRÁFICAS... 35

2 FrontPage 98 Web Design II Página 4 Introdução Neste curso FrontPage Web Design II, vamos primeiramente relembrar alguns conceitos do primeiro módulo do curso. Vimos que o FrontPage 98 é uma ferramenta de software voltada para a criação e gerenciamento de web sites. Um web site é uma coleção de páginas HTML (ou home-pages ), imagens, documentos, e outros arquivos e pastas armazenados em um equipamento servidor na web. Assim, um web site é um lugar virtual na Internet pronto para ser visitado por qualquer pessoa localizada em qualquer parte do mundo. Obviamente esta pessoa tem que ter acesso a Internet e dispor de um software navegador (ou browser ). Esta nova versão do FrontPage (versão 98) deu um grande salto em relação à versão anterior, tornando-se agora uma ferramenta capaz de servir às necessidades tanto de um principiante quanto de um "webmaster" profissional. O FrontPage 98 inclui o FrontPage Explorer, com o qual você pode criar, projetar, e gerenciar todo o web site, o Personal Web Server para usar como web server de testes, o FrontPage Editor para você criar e editar as páginas web sem a necessidade de conhecer a linguagem HTML, o Image Composer para você editar imagens e o Gif Animator para você criar imagens gif animadas. Autores no FrontPage podem criar páginas web e sites inteiros usando o software em um computador cliente (um PC ou Macintosh). Estes programas ditos clientes são o FrontPage Explorer e o FrontPage Editor. O FrontPage Explorer é o principal componente do FrontPage. Você pode usar o Explorer para construir, manter, administrar e publicar sites. Com o FrontPage Explorer é possível ver a estrutura completa do web site que você está criando, verificar e atualizar os links, e utilizar temas - uma novidade nesta nova versão. Ao aplicar um tema (selecionado dentre mais de 50 temas já incluídos com o software) num conjunto de páginas, todas elas ficam com o mesmo cabeçalho, bordas, botões de navegação, etc. Você pode também utilizar o FrontPage Explorer para publicar um FrontPage web completo em seu computador, na Intranet de sua organização, ou na World Wide Web. FrontPage web é uma coleção de páginas HTML, imagens, documentos, e outros arquivos e pastas que normalmente compõe um web site. Desta maneira, autores podem criar, deletar, abrir, editar e fechar FrontPage webs, utilizando o FrontPage Explorer e o FrontPage Editor em um computador cliente. Os FrontPage webs podem ser armazenados em um Web server remoto, em um Web server rodando no mesmo computador como um programa cliente, ou no sistema de arquivos de um computador cliente. Outra característica é que quando mais de uma pessoa está trabalhando no mesmo web site, o FrontPage Explorer, utilizado em conjunto com o Personal Web Server, permite verificar quando e por quem foram criadas ou editadas as páginas, gerenciando o trabalho de equipe de forma eficiente. A lista de tarefas é também de grande auxílio para o trabalho em equipe. O FrontPage Editor é o "coração" do FrontPage já que é este componente de software que permite criar e editar as páginas web. Você não precisa aprender HTML para usar o FrontPage Editor porque ele cria todo o código HTML para você. Especialmente nesta versão, a Microsoft melhorou bastante a interface gráfica. É possível utilizar três modos de visualização, o modo normal de edição de páginas visual, o modo HTML, ou o modo "preview" no qual pode-se ver como ficará a página no browser. A criação de tabelas foi melhorada, assim como o suporte a "cascading style sheets" e à norma HTML 4.0. Com o FrontPage Editor é ainda possível criar animações baseadas no DHTML (Dynamic HTML) e canais (active channels) ambos para o Internet Explorer 4. O Microsoft FrontPage 98 inclui também, tal como acontecia na versão anterior, elementos ativos chamados FrontPage Bots com os quais torna-se possível criar fóruns de discussão, formulários, contadores, mini motores de busca, entre outras coisas. No entanto, para que as páginas web com FrontPage bots funcionem, é preciso que estejam alojadas num servidor que tenha as FrontPage Server Extensions. Estas "extensões" permitem a utilização das opções mais avançadas do FrontPage. Assim, muito da funcionalidade do FrontPage Explorer e do FrontPage Editor deve-se ao FrontPage Server Extensions. O Image Composer permite editar imagens, embora não seja comparável a programas como Adobe Photosop ou Corel PhotoPaint, e o Microsoft Gif Animator continua uma boa ferramenta para criar gif animados, desde que, é claro, utilize-se um bom editor de imagens separadamente.

3 FrontPage 98 Web Design II Página 5 Características Importantes do FrontPage 98 Criando web sites atraentes com o Assistente de Criação Inteligente Criação de sites da web com qualidade profissional utilizando assistentes, desenhando tabelas e frames WYSIWYG. Os Modelos e Assistentes tornam amigável a criação do conteúdo das páginas, bem como completos web sites. Além disso, novas ferramentas de desenho de tabelas fornecem aos usuários o controle do desenho a nível de pixel, permitindo a criação de tabelas na forma WYSIWYG (What You See Is What You Get), ou seja, basta arrastar-e-soltar para reposicionar as linhas e colunas das tabelas. Você também pode criar e editar páginas de frames utilizando esta mesma forma. Use um dos modelos de frames fornecidos ou crie uma grade de frames personalizada com alguns cliques do mouse e, em seguida, edite o conjunto de frames e quaisquer páginas incluídas dentro do conjunto de frames diretamente na tela no Editor do FrontPage. Gráficos de Web sites automáticos, manchetes de páginas e barras de navegação utilizando Themes e o novo recurso Shared Borders Agora você pode criar web sites consistentes e atraentes com mais de 50 modelos gráficos criados profissionalmente, denominados Themes. Estes temas podem ser rapidamente aplicados ao site inteiro ou em páginas individuais. Backgrounds de qualidade profissional, marcadores, manchetes de páginas, hyperlinks e barras de navegação são geradas automaticamente -- sem precisar de um criador de gráficos! Além disso, o novo recurso Shared Borders permite que os usuários especifiquem cabeçalhos ou rodapés comuns ou compartilhados (horizontais ou verticais) por todas as páginas nas suas Webs. O recurso Shared Borders fornece bastante flexibilidade de criação ao criar Web sites atraentes e consistentes. Novo suporte a Dynamic HTML (DHTML) e Cascading Style Sheets (CSS) e assistente Channel Definition Format O FrontPage 98 possui um conjunto de novos recursos que permite que os usuários desfrutem os benefícios de Dynamic HTML e Cascading Style Sheets para adicionar uma nova funcionalidade às páginas da Web sem programação. Os usuários do FrontPage podem também se beneficiar do novo mundo extraordinário da tecnologia "Push" com o novo Assistente de CDF, que transforma web sites em canais nos quais os visitantes podem inscrever-se para fornecimento automático de conteúdos da Web para qualquer área de trabalho do visitante que estiver executando Internet Explorer 4.0. Gerenciando a estrutura e o conteúdo do web site Novos modos de exibição e barra de visualização do FrontPage Explorer; atualizações automáticas e fácil manutenção de hiperlinks O FrontPage 98 Explorer possui uma nova barra de visualização no lado esquerdo que oferece aos usuários acesso via um clique a todos os modos de exibição do FrontPage, incluindo Navigation, All Files e Themes além dos modos Folders, Hyperlinks, Hyperlink Status (anteriormente denominado Verify Hyperlinks) e Tasks. Esses 7 modos de exibição permitem que autores no FrontPage gerenciem de forma eficiente seus websites do modo que quiserem, permitindo também que gerem e atualizem seus conteúdos da Web automaticamente. Por exemplo, o modo de exibição Navigation constitui um recurso de criação e gerenciamento de site inovador que permite que os usuários criem e gerenciem a estrutura navegacional dos seus web sites em segundos; o modo de exibição Folders permite que os usuários organizem seus conteúdos da web da mesma forma como eles organizariam arquivos na área de trabalho utilizando pastas e subpastas. Quando os usuários arrastam e soltam o conteúdo de uma pasta para outra, o FrontPage 98 renomeia automaticamente os arquivos e atualiza todos os hiperlinks associados.

4 FrontPage 98 Web Design II Página 6 Integrando o conteúdo existente com outros aplicativos familiares Aparência consistente e ferramentas compartilhadas O FrontPage assemelha-se e atua como a família de produtos do Office já conhecidos. Desta maneira, novos autores na web conseguem integrar-se rapidamente ao ambiente. Além disso, arquivos comuns tais como clip-art, verificador ortográfico, localizar e substituir, e o dicionário de sinônimos, economizam espaço em disco, enquanto texto compartilhado e conversores gráficos tornam mais fácil o procedimento de adicionar conteúdo a seus web sites. Em resumo, a Microsoft introduziu várias modificações nesta nova versão do FrontPage, tornando-a mais fácil de usar e ao mesmo tempo mais robusta, satisfazendo a necessidade de profissionais. A integração com outros programas da família Microsoft Office foi melhorada, e foi também incluído suporte às novidades do Internet Explorer 4. Para mais informações visite o endereço: Controlando Imagens com o FrontPage 98 Criando mapa de imagens clicáveis com o FrontPage 98 No curso FrontPage Web Design I nós vimos como tornar uma imagem em um hiperlink, de modo que quando a imagem é clicada, uma outra página web ou outro documento qualquer pode ser chamado. Mas, você sabe que é possível criar imagens na qual porções desta imagem (ou hotspots ) agem como hiperlinks? Estas imagens especiais são chamadas image maps ou mapa de imagens. Fazer um mapeamento de uma imagem é fácil com o FrontPage. Você precisa incorporar uma imagem (GIF ou JPEG) em sua página web de modo normal, para depois então usar a barra de ferramentas Image do FrontPage para indicar os hotspots sobre a imagem, junto com o endereço da página que serão chamadas. Nota : O FrontPage cria mapas de imagem "client-side", que armazenam detalhes sobre os hotspots como parte integral de seu arquivo HTML. Este tipo de mapa de imagem funcionam na maioria dos navegadores, mas não em todos. Há um segundo tipo de mapa de imagem - "server-side", que utilizam programas rodando no servidor web para tratar com as coordenadas do mouse sobre a imagem. Este tipo de mapa não é usado muito, mas funciona em todos os navegadores. Passo 1: Encontre uma imagem adequada Se você quiser criar um mapa de imagem, então primeiramente você precisará de uma imagem. Uma vez que você tenha criado ou encontrado uma imagem adequada, carregue-a para dentro de sua página web de modo normal (usando o comando Insert Image na barra de menu). Para um exemplo, considere uma imagem do mapa do Brasil como mapa de imagem, como você pode ver na figura abaixo. O principal critério para um mapa de imagem é que devem ter áreas que serão claramente identificáveis como hiperlinks. Neste exemplo, cada Estado Brasileiro poderá ser transformado em um hotspot.

5 FrontPage 98 Web Design II Página 7 Passo 2: Identificando os hotspots Este procedimento é feito facilmente se a barra de ferramentas Image estiver visível. Esta barra de ferramentas normalmente aparece quando você seleciona a imagem, mas pode também ser ativada selecionando o comando View Image na barra de ferramentas principal. A figura abaixo mostra a barra de ferramentas para imagem e as opções para tratar com mapas de imagem. Com a imagem selecionada, clique no botão Hotspot Poligonal, e o ponteiro do mouse mudará para uma forma de lápis. Isto habilitará você a definir uma área hotspot poligonal. Então, é só clicar ponto a ponto para contornar a forma de cada Estado Brasileiro. Cada vez que você terminar de contornar um Estado, ao soltar o mouse será mostrada a janela Edit Hyperlink, na qual você poderá entrar com o endereço URL da

6 FrontPage 98 Web Design II Página 8 página que você quer que este hotspot em particular chame. Não se preocupe se você não definiu o hotspot adequadamente, pois você poderá a qualquer momento editá-lo em um estágio posterior. Para editar um hotspot, clique sobre ele uma vez, então você poderá arrastar o hotspot. Alternativamente dando duplo clique sobre este hotspot habilitará você a alterar o endereço URL. Se o hotspot estiver selecionado, pressionando a tecla Delete do teclado você o removerá. O FrontPage 98 também tem o botão Highlight HotSpots na barra de ferramentas Image. Por exemplo, o mapa de imagem usado neste caso mostrará todos os hotspots destacados. Observe que quando você mover o mouse sobre a imagem, o ponteiro do mouse usualmente muda para a forma de uma mão sobre o hotspot. O endereço URL do hotspot será então mostrado na barra de status do navegador. Criando Efeitos com o Microsoft Image Composer O Microsoft Image Composer torna fácil a criação de imagens para utilização em web sites, CD- ROMs, videos, e outros meios. Com Image Composer, você poderá : Trabalhar com recursos variados, incluindo imagens escanerizadas, clip arts, camera digital, criações originais com o próprio Image Composer, e outros. Criar visuais profissionais através de centenas de efeitos com um simples clique do botão do mouse. Produzir resultados rapidamente, como botões para páginas web, com ferramentas como o "Button Wizard". Salvar seus resultados nos formatos mais populares, e deixar o Image Composer ajudar você com o "Save" através do "Web Wizard". A figura abaixo mostra a tela do Image Composer com a indicação dos recursos da barra de ferramentas. Seleção Arranjo Recorte Texto Formas Pintura Efeitos Transferência de textura Zoom Reposiciona janela ativa Sintonia das cores Espaço de trabalho

7 FrontPage 98 Web Design II Página 9 Objetos de Imagem Composições são objetos de imagem. No software Image Composer, objetos de imagem são chamados de "sprites". Um sprite tem forma e transparência, como mostrado na figura abaixo. Uma vez que sprites são objetos, você pode utilizar o mouse para movê-los, na área de trabalho assim como você move os ícones no ambiente Windows. Cada sprite é delimitado por um espaço retangular chamado de "bounding box". Este "box" representa um quadro de referência e as setinhas representam o que você pode fazer com o "sprite", tal como redimensionar ou rotacionar. Você pode ainda combinar "sprites" temporariamente ou permanentemente. Transparência Muitas vezes, o que você não pode ver é tão importante quanto o que você pode ver. Com o Image Composer, o que você pode ver depende da transparência, que é uma propriedade dos "sprites". Transparência é especificada em níveis de opacidade, de 0%, completamente transparente, até 100%, completamente opaco. Isto é realizado no canal alpha, que trabalha a opacidade como os canais vermelho, verde e azul trabalham as cores. Vários efeitos e ferramentas têm controle de opacidade. Você pode usar transparência de várias maneiras, incluindo: Utilização de transparência para pintar como se fosse uma cor. Apagar porções de um "sprite" variando as percentagens da opacidade. Deixando um fundo de uma página Web ser mostrada através de um "sprite". A figura a seguir mostra um exemplo do uso de transparência em uma porção retangular da imagem.

8 FrontPage 98 Web Design II Página 10 Ciclo de Trabalho Trabalhar com o Image Composer é simples, intuitivo, e encoraja você a experimentar. Estes são os passos normalmente utilizados quando se está trabalhando com o Image Composer : 1. O primeiro passo é inserir ou abrir uma imagem, ou criar um novo "sprite". 2. O próximo passo é selecionar o "sprite". 3. Então, escolher o efeito ou ferramenta que você quer usar. 4. Para a maioria dos efeitos e ferramentas, clique Apply como o passo final. Se você ficar insatisfeito com o resultado, clique Undo e aplique novos efeitos. Alterando Cores As cores podem transmitir drama, emoção, e informação num relance, de uma maneira que poucas outras coisas conseguem. No Image Composer, você trabalha com a cor corrente por várias aplicações, incluindo vários efeitos. O Color Swatch na base da caixa de ferramenta, mostra a cor corrente. Alterando a cor corrente não altera a cor que você vê em seu "sprite" corrente até você realizar uma ação. Para alterar a cor corrente, siga os seguintes passos: 1. Clique com o botão direito do mouse no Color Swatch para mostrar o Color Picker compacto, como na figura abaixo. Clique com o botão esquerdo do mouse no Color Swatch para mostrar o Color Picker completo. 2. Clique o círculo no meio da matriz de cores e arraste para a cor que você quer que altere. 3. Clique OK. A nova cor que você escolheu será a cor corrente que será aplicada a todas as ações futuras que usar a cor corrente. Fazendo Recortes Uma tarefa comum na criação de imagens é recortar uma porção do "sprite". Usar o recorte como um "sprite" separado, como uma máscar enquanto estiver aplicando um efeito, como uma base para animações, e muito mais. Assim como muitas ferramentas, as ferramentas de recorte encontram-se na palete de ferramentas. Clique no botão Cutout na caixa de ferramentas para ativar a palete da ferramenta Cutout. Criar recortes em formatos comuns ou em formas livres. A figura seguinte mostra uma foto original, um recorte feito com a ferramenta curva sobre um novo "sprite" e finalmente um recorte feito com a ferramenta oval.

9 FrontPage 98 Web Design II Página 11 Os passos envolvidos na criação dos recortes são simples: 1. Selecione o objeto que você quer recortar. 2. Então clique no botão cutout na caixa de ferramentas. 3. Selecione uma ferramenta de recorte para utilizar. Selecione a porção que você quer, corte esta porção, e pronto! Criando Sombras Uma das maneiras mais fáceis de adicionar profundidade e impacto em uma imagem é utilizar um pouco de sombra, uma que siga proximamente o contorno de um "sprite". Com Image Composer, você pode facilmente criar sombras em qualquer cor, nível de transparência, ângulo da fonte de iluminação, e grau de firmeza nos traços. As três figuras abaixo mostram diversas variações da utilização do efeito drop shadow. Então, resumidamente, os passos básicos para criar um drop shadow são : 1. Selecione um sprite. 2. Na caixa de ferramenta, clique Effects. 3. Na caixa "Category", clique Outlines, então clique Drop Shadow. 4. Em Details, customize o shadow, então clique Apply. Incluindo Elementos Ativos ou Efeitos Especiais com FrontPage 98 Hover Buttons Hover Buttons é uma característica do FrontPage 98 que permite criar botões que mudam a forma ou a cor quando o ponteiro do mouse move-se sobre eles. Este tipo de botão é ótimo para a produção de barra de navegação para seu web site, como no exemplo abaixo : Apesar de ser desempenhado por pequenos applets Java, o FrontPage contém uma janela Hover Button para permitir fácil acesso a todas as funções suportadas pelo Applet Hover Button. Os quatro Hover Buttons acima foram adicionados usando o comando Insert Active Elements Hover Button do FrontPage Editor. A janela Hover Button que permite que você customize os botões é um pouco complexa, mas a tela abaixo mostra as opções que foram usadas para estes Hover Buttons em particular.

10 FrontPage 98 Web Design II Página 12 O primeiro campo Button text contém o texto do botão. Os Hover Buttons funcionam melhor com textos curtos, uma ou duas palavras. Observe que há um botão Font se você quiser alterar a cor e o tipo da fonte, apesar de você ficar limitado a uma das 4 fontes : Arial, Courier, Sans Serif or Times Roman. O máximo tamanho de fonte é 40 pontos, mas é melhor usar tamanho de fonte pequeno. Não esqueça que é também possível alterar a largura (Width) e a altura (Height) dos Hover Buttons usando os campos na janela principal Hover Button. O segundo campo habilita assinalar o URL que o botão ativará quando clicado. Finalmente, você será capaz de especificar a cor do botão (Button color) bem como cor de efeito (Effect color). O importante é garantir que estas cores juntas proporcionem um bom visual. No exemplo acima, o efeito Glow foi utilizado, que ilumina o botão cinza com uma cor customizada quando o mouse é posicionado sobre o botão. Você agora já pode testar todos os outros efeitos que podem ser aplicados usando ao lista Effect na janela Hover Button. Botões Customizados Apesar dos efeitos e botões padrões darem um resultado muito bom nas páginas web, algumas vezes você poderá desejar utilizar suas próprias imagens. Para fazer isto, utilize seu programa gráfico favorito, para criar duas imagens idênticas em tamanho. Você poderá usar também o Button Wizard do Microsoft Image Composer para construir seus botões e depois exportá-las como GIFs usando o comando File Save for the Web da barra de menu principal. Volte agora para o FrontPage 98, insira um Hover Button como descrito anteriormente. Na janela Hover Button, deixe em branco o campo Button text, e não altere o Button color, Effect e Effect color. Não esqueça de adicionar o endereço URL no campo Link to. Agora, clique no botão Custom. Quando a janela Custom aparecer, digite o nome do arquivo da imagem customizada nos campos Button e On hover. Volte para a parte principal da janela Hover Button, garanta que os campos Width e Height estão assinalados com as dimensões iguais das imagens customizadas. Um exemplo de botões customizados é mostrado abaixo com as duas imagens lado a lado. A segunda imagem é mostrada quando o ponteiro do mouse passa sobre a primeira imagem.

11 FrontPage 98 Web Design II Página 13 Adicionando efeitos de som para os Hover Buttons Se você mover seu ponteiro do mouse sobre este Hover Button Novidades mostrado acima, você poderá escutar um som. A capacidade de associar som com Hover Buttons é um segredo do FrontPage 98! Os Hover Buttons não podem executar arquivos de som no formato popular dos PCs que é o formato.wav, portanto, se seu arquivo de som está neste formato, você precisará seguir alguns passos antes de poder associá-lo com o botão para garantir a compatibilidade com este recurso do FrontPage 98. Este procedimento indicado abaixo, irá salvar seu arquivo de som no formato correto de arquivo tipo.au. Faça um download de um programa de edição de som. O programa shareware Cool Edit é altamente recomendado. Abra o arquivo de som.wav no Cool Edit. Use o comando de menu Edit Copy para copiar este modelo para o clipboard do Windows. Use o comando de menu File New. Quando a janela New Waveform aparecer, selecione um sample rate de Garanta que a opção Channels esteja assinalada para Mono e a Resolution esteja assinalada para 8-bit. Clique no botão OK para continuar. Use o comando de menu Edit Paste para copiar o som do clipboard. Use o comando File Save As para salvar o arquivo em seu web site no FrontPage. Quando salvar o arquivo, é essencial alterar o campo Save as type para Next/Sun (*.au;*.snd). Em Options na parte da janela Save Waveform As, altere o NeXT/Sun AU Format para mu-law 8-bit. Volte para o FrontPage 98, dê duplo clique em seu Hover Button, então no botão Custom na janela Hover Button. Você pode então entrar com o nome de seu arquivo no formato de som.au nos campos On click e On hover na janela Custom. Para testar o efeito de som, carregue sua página em um navegador (o painel Preview do FrontPage não funcionará). Se você estiver usando o Netscape 4, é possível usar o comando de menu do Netscape Communicator Java Console para examinar o Applet Java. Isto é muito útil para verificar quando o som do botão não estiver funcionando apropriadamente (na janela abaixo, o som foi executado numa freqüência muito alta para o applet. Uploading the Hover Button Applet Os Applets Java são arquivos separados das páginas webs, sendo assim, você deve garantir que eles serão carregados para o servidor web junto com as páginas web e todos os arquivos de imagens associados. Se suas páginas estão armazenadas em um servidor que suporta FrontPage server extensions, então o Applet necessário será carregado automaticamente, e residirão na pasta _fpclass. Se suas páginas web estão armazenadas em um servidor que não suporta FrontPage server extensions, então garanta a transferência da pasta _fpclass juntamente com seus outros arquivos. Se você não puder visualizar esta pasta em seu web site, então utilize comando Tools Web Settings do menu do FrontPage Explorer. Na janela FrontPage Web Settings, clique na tab Advanced e assinale a opção Show documents in hidden directories. Após atualizar seu FrontPage web site, a pasta _fpclass deverá aparecer. Se você ainda tiver problemas, use o Editor HTML do FrontPage para verificar se o código dao Applet Hover Button está correto (isto é, se o codebase aponta para a pasta correta contendo o arquivo em java chamado fphover.class). Por exemplo, o código para o Hover Button Novidades é mostrado abaixo :

12 FrontPage 98 Web Design II Página 14 <applet code="fphover.class" codebase="../_fpclass/" width="143" height="114"> <param name="text" value> <param name="color" value="#000080"> <param name="hovercolor" value="#0000ff"> <param name="textcolor" value="#ffffff"> <param name="effect" value="glow"> <param name="url" value=" valuetype="ref"> <param name="image" value="hover1.if" valuetype="ref"> <param name="hoverimage" value="hover2.gif" valuetype="ref"> <param name="sound" value valuetype="ref"> <param name="hoversound" value="bellsound.au" valuetype="ref"> </applet> Outras considerações sobre hover buttons Os Hover Buttons são desenvolvidos em Java, então os arquivos de imagens customizadas devem residir em um servidor web [por motivos de segurança, a linguagem Java é incapaz de acessar diretamente arquivos em disco]. Se você customizar imagens para seus botões, não esqueça que Applets em Java não podem ter fundo transparentes. Conforme a situação, isto pode representar um problema em sua página. Não esqueça que Java não é suportada por todos os navegadores, então, se você usá-las como hiperlinks, você deve pensar em algumas alternativas de navegação para seu site. Outra consideração é que a inclusão de Applet Java do Hover Buttton em sua página poderá aumentar o tempo de carga da página. Banner Ad Banner ads são um tipo de quadro de avisos que mostram uma série de imagens. A medida que cada imagem desta série é mostrada, um efeito de transição pode ser aplicado pelo navegador. Você poderá ainda associar um hiperlink ao banner ad. Assim, por exemplo, você poderá usar este recurso para gerar o interesse do visitante de sua página por algum tipo de serviço web que você está disponibilizando, e enviar o usuário para um outro site quando ele clicar no banner ad. Para criar um banner ad siga os seguintes passos: 1. No FrontPage Editor, no menu Insert, aponte para Active Elements e então clique Banner Ad Manager. 2. Na caixa de diálogo Banner Ad Manager, para cada imagem da série, clique Add e, na caixa de diálogo Add Image for Banner Ad, selecione a imagem do seu web site, seu sistema de arquivo, ou da World Wide Web. 3. Para alterar a posição de uma imagem no banner ad, selecione a imagem e clique Move Up ou Move Down. 4. No campo Effect, selecione o efeito de transição. 5. Para criar um hiperlink, entre com o URL no campo Link To, ou clique Browse e selecione um hiperlink na caixa de diálogo Select Banner Ad Hyperlink. 6. Opcionalmente ajuste a largura, altura e o tempo para mostrar cada imagem. 7. Clique OK. Marquee Um marquee é uma região em uma página que mostra uma mensagem de texto que rola na tela horizontalmente. Para inserir um marquee siga os seguintes passos : 1. No FrontPage Editor, coloque um ponto de inserção em uma linha em branco de texto, ou selecione o texto que você que mostrar no marquee.

13 FrontPage 98 Web Design II Página No menu Insert, aponte para Active Elements, então clique Marquee. A caixa de diálogo Marquee Properties é então mostrada. 3. Na caixa Text, entre com a linha de texto que será mostrada. Se você selecionou o texto no passo anterior, então a caixa Text já conterá o texto selecionado. 4. Ajuste os valores para direção, velocidade do movimento, comportamento, alinhamento, tamanho, repetições, e cor de fundo. 5. Clique OK. 6. Para visualizar o marquee da mesma maneira que ele aparecerá na web, no menu File, escolha a opção Preview in Browser. Hit Counter Para inserir um contador de número de acessos à sua página (ou hit counter) siga os seguintes passos : 1. No FrontPage Editor, coloque um ponto de inserção onde você quer criar o contador de páginas. 2. No menu Insert aponte para Active Elements e então clique Hit Counter. 3. Na caixa de diálogo Hit Counter Properties, no campo Counter Style, selecione um estilo de contador. Isto é uma imagem tipo GIF contendo os digitos de zero até nove. 4. Para indicar o valor inicial da contagem, especifique o valor no campo Reset Counter To. 5. Para usar um outro estilo de imagem, você deverá criar uma outra imagem GIF com os valores de zero até nove mantendo o mesmo espaço entre cada valor. Depois basta indicar no campo Custom Image o endereço URL de onde se encontra a imagem criada. 6. Clique OK. Animação de elementos da página Você pode aplicar animação com Dynamic HTML (DHTML) para qualquer elemento de sua página. O FrontPage 98 inclui vários efeitos de animação que podem, por exemplo, fazer um texto voar em sua página web. Para animar um ou mais elementos da página, siga os seguintes passos : 1. No FrontPage Editor, selecione o texto, gráfico ou outro elemento qualquer da página para animar. 2. No menu Format, escolha Animation e então clique o efeito que você quiser aplicar, tal como Zoom In ou Fly From Top. A animação será mostrada no Microsoft Internet Explorer 4.0 ou em outro navegador que suporte DHTML (Dynamic HTML) Efeitos de transição de página Você pode aplicar efeitos de transição em suas páginas. São efeitos que ocorrerão quando o usuário estiver surfando em sua página ou quando ele sair de sua página. Para fazer isto, siga os seguintes passos : 1. No FrontPage Editor, no menu Format escolha Page Transition. 2. Na caixa de diálogo Page Transition, no campo Event, selecione o evento que será realizado quando entrar em seu web site, por exemplo. 3. Na caixa de diálogo Page Transition, no campo Transition Effect, selecione o efeito de transição que você quer aplicar. 4. Na caixa de diálogo Page Transition, no campo Duration, selecione o tempo em segundos da duração do efeito. 5. Clique OK. O efeito de transição será mostrado no Microsoft Internet Explorer 4.0 ou em outro navegador que suporte DHTML (Dynamic HTML)

14 FrontPage 98 Web Design II Página 16 Page Banners Um page banner é um componente do FrontPage que usualmente aparece no topo de cada página em um web site. Podem ser utilizados para mostrar o título de uma página usando tanto texto como imagens. Um page banner pode ser usado com ou sem os temas ou shared borders do Microsoft FrontPage 98. Quando você inclui um page banner em uma página HTML, o título da página é inserido no ponto de inserção. Se você alterar o título da página através do Navigation View, o page banner será dinamicamente atualizado para refletir o novo título. Se você usar um page banner em um web site que utiliza temas, o page banner mostrará o título da página como texto somente. Page Banners com Temas Quando estiver utilizando temas, você pode usar tanto texto quanto imagens para compor o page banner. Se você selecionou uma imagem, o page banner pegará a imagem do tema selecionado e escreverá o título da página em cima daquela imagem selecionada. Se você alterar o título, da página, o page banner atualizará a imagem para o novo título da página. Se você clicar em Text na caixa de diálogo Page Banner Properties, o banner aparecerá somente como texto. Componente Include Page Você já imaginou ter que realizar alterações em cabeçalhos ou rodapés em dezenas ou até mesmo centenas de páginas dependendo do tamanho do seu web site? Realmente seria muito frustrante. Para contornar este problema, a solução é o componente Include Page. Por exemplo, você pode criar uma página de rodapé padrão que precisa aparecer na parte inferior de todas as páginas contidas no seu site. Em cada página, você pode criar um componente do FrontPage que automaticamente insira um arquivo HTML toda vez que um visitante acessar a página. Futuramente, quando precisar alterar somente o rodapé padrão de todas as páginas, você precisará atualizar apenas a página de rodapé padrão em HTML. O FrontPage inclui dinamicamente o rodapé toda vez que um visitante solicitar aquela página, portanto suas alterações se refletem imediatamente ao longo de todo o site. Portanto, o componente Include Page permite incluir os conteúdos de uma página dentro de outras. Por exemplo, se você tiver links para auxiliar a navegação ou uma logomarca no topo de todas as páginas, você pode dizer para aquelas páginas incluirem os conteúdos de uma página em separado contendo os links ou logomarcas. Toda vez que você atualizar esta página, todas as páginas serão atualizadas. Este procedimento garante uma consistência em todo o site. Como utilizar o componente Include Page No Front Page Editor, crie uma página que você quer incluir em outras páginas. Na verdade esta página poderá conter qualquer coisa que servirá como cabeçalho ou rodapé das outras páginas. Abra a página que conterá a página incluída e ative a caixa de diálogo Insert FrontPage Component. Nesta caixa, selecione Include Page, e a caixa de diálogo Include Page Component Properties aparecerá. Para selecionar o arquivo que você deseja incluir, digite o nome de arquivo ou o endereço URL correspondente, ou clique no botão Browse e escolha uma página do seu web site corrente. Clique OK e o FrontPage, por meio da inserção de arquivo, incluirá essa página automaticamente. Para atualizar o arquivo incluído, você precisará carregá-lo separadamente por intermédio do FrontPage Editor. Depois, qualquer alteração que for feita será automaticamente refletida em todas as páginas que contém este arquivo HTML.

15 FrontPage 98 Web Design II Página 17 Usando Folhas de Estilo no FrontPage 98 A vantagem de utilizar a caixa de diálogo Page Properties para assinalar as propriedades da página para suas páginas web é que estas propriedades que você seleciona podem ser mostradas em qualquer navegador que suporta imagens e diferentes fontes e cores de hiperlinks. Nota: Para diferenciar entre os dois tipos de folhas de estilo que o FrontPage utiliza, vamos referenciar este método que é compatível com todos os navegadores como Folhas de Estilo do FrontPage (FrontPage style sheet). O estilo usado com os temas são chamados CSS (cascading style sheets), que serão discutidos adiante. Para criar To Folhas de Estilo do FrontPage (FrontPage style sheet), siga os seguintes passos : 1. No FrontPage Explorer, use o comando File New FrontPage Web para criar um web site vazio para você praticar. Chame seu web site de Style Sheets. 2. Escolha View Themes ou clique o ícone Themes no painel Views para visualizar os Temas no FrontPage Explorer. Selecione a opção This Web Does Not Use Themes e clique Apply. 3. Escolha Tools Show FrontPage Editor ou use o botão Show FrontPage Editor para abrir o Editor do FrontPage. O FrontPage Editor abre com uma página em branco. 4. Escolha File Page Properties. A caixa de diálogo Page Properties aparece, aberta na tab General. 5. Entre com Web Style Sheet no campo Title. 6. Clique na tab Background, mostrado na figura abaixo. Aqui, você pode assinalar imagens de fundo e cores de texto e hiperlinks para sua página.

16 FrontPage 98 Web Design II Página Para especificar uma imagem de fundo para sua página, assinale Background Image. Clique no botão Browse. A caixa de diálogo Select Background Image aparecerá. 8. Para inserir uma imagem de fundo a partir de sua pasta de clip art, selecione o botão Clip Art. Da lista de categorias no lado esquerdo da caixa de diálogo Microsoft Clip Gallery 3.0, selecione a categoria Web Backgrounds, como mostrado na figura abaixo. Selecione uma das opções de fundo de página dando duplo clique sobre a opção escolhida.

17 FrontPage 98 Web Design II Página Para tornar a imagem de fundo uma marca d água (uma imagem de fundo parada que não rola com a tela) selecione a caixa de checagem Watermark. 10. A partir do menu de seleção Text, escolha Custom para criar uma cor de texto customizada para sua página web. Utilize a caixa de diálogo Color, mostrada na figura abaixo, para criar uma cor customizada com os seguintes valores : Red 51, Green 0, Blue 0. Estes valores representam uma cor marrom escuro. Escolha OK para retornar para a caixa de diálogo Page Properties.

18 FrontPage 98 Web Design II Página De maneira similar, repita o passo 10 para selecionar as seguintes cores para os hiperlinks em suas páginas web : Hiperlink Escolha Custom e crie uma cor customizada com Red 0, Green 0, Blue 204. Hiperlink Visitado Deixe isto assinalado com a cor default (padrão) de dark purple. Hiperlink Ativo Escolha Custom e crie uma cor customizada com Red 204, Green 0, Blue Clique OK para sair da caixa de diálogo Page Properties. A imagem de fundo aparecerá em sua página. 13. Escolha File Save (Ctrl+S) ou clique o botão Save na barra de ferramentas padrão. A caixa de diálogo Save As aparecerá. 14. O título que você entrou no passo 2 aparece no campo Title. Da lista de pastas em seu web site atual, dê duplo clique na pasta _private. Então entre com webstyle.htm no campo URL. 15. Escolha OK para salvar sua folha de estilo em seu web site. A caixa de diálogo Save Embedded Files aparece como na figura seguinte. 16. Selecione o nome do arquivo da lista Embedded Files to Save. O botão Rename é ativado. Pressione Rename e troque o nome da imagem de fundo backgrnd.gif. Pressione Enter ou clique fora da caixa para trocar o nome do arquivo. 17. Com o nome de arquivo já destacado pressione o botão Change Folder. Dê duplo clique na pasta images para selecioná-la. Se nenhuma imagem existe nesta pasta escolha OK para salvar sua imagem nesta pasta. Se outra imagem já existir nesta pasta, selecione um dos arquivos e então escolha OK. Você retornará para a caixa de diálogo Save Embedded files. Uma coluna mostrará images/ como a pasta na qual seu arquivo foi salvo. 18. Escolha OK. Sua imagem de fundo está salva na pasta images, e sua folha de estilo está salva na pasta _private. 19. Escolha File Close para fechar a página Web Style Sheet. Associando a Folha de Estilo do FrontPage a Outra Página Agora que você criou sua própria folha de estilo no FrontPage, você poderá facilmente associá-la a outra página. Você pode utilizar a tab Background na caixa de diálogo Page Properties para realizar esta tarefa. Nos passos seguintes, você criará uma nova página baseada em um dos modelos de página do FrontPage.

19 FrontPage 98 Web Design II Página 21 Você assinalará a folha de estilo que você criou anteriormente para esta página web. Para assinalar sua folha de estilo a outra página, siga os seguintes passos : 1. A partir do FrontPage Editor, escolha File New (Ctrl+N). A caixa de diálogo New Page aparecerá. 2. Dê duplo clique na opçãode modelo de página denominado One-column Body with Contents and Sidebar ou selecione esta opção e escolha OK. Uma nova página aparece no FrontPage Editor. 3. Escolha Format Background. A caixa de diálogo Page Properties abre na tab Background como mostrado na figura 1 anteriormente. 4. Selecione a opção Get Background and Colors from Page. As opções da seção Specify Background and Colors são disabilitadas. 5. Clique no botão Browse. A caixa de diálogo Current Web aparecerá. 6. Dê duplo clique na pasta _private para selecioná-la, então duplo clique na página webstyle.htm para assinalar sua página de estilo. Você retorna para a caixa de diálogo Page Properties. 7. Clique OK. As propriedades que você especificou para sua folha de estilo são assinaladas para sua página atual. Se posteriormente você desejar alterar o visual de suas páginas web, você pode abrir a página _private/webstyle.htm e alterar a imagem e cor de fundo da página, cor de texto e dos hiperlinks. Quando você salvar novamente estas alterações em seu web site, todas as páginas que estavam relacionadas a sua folha de estilo do FrontPage mudarão suas aparências automaticamente.

20 FrontPage 98 Web Design II Página 22 Cascading Style Sheets (CSS) no FrontPage 98 A seguinte ilustração é uma tela capturada de uma página que demonstra o uso de Cascading Style Sheets. É um conjunto de 4 hiperlinks na base da página. Você notará que estes hiperlinks têm todos um visual diferente. Ainda, todos estão na mesma página. Como isto é feito? Com a utilização de Cascading Style Sheets (CSS). Vamos ver como usar o FrontPage 98 para criar um CSS para você. A primeira coisa que você irá fazer é criar um Embedded Style Sheet para sua página.. Isto é feito selecionando Format Stylesheet no menu. O FrontPage 98 tem um bom utilitário para implementação de CSS em suas páginas. Quando você selecionar este item de menu, você verá a seguinte caixa de diálogo: Observe a janela de edição já com a tag Style Sheet. As definições de estilo aparecerão entre as tags de comentário "<--" e "-->". Você poderá editar manualmente ou usar o botão Style para criar seus estilos. Para fazer isto, é necessário primeiramente conhecer um pouco mais sobre CSS. CSS é um tópico muito amplo e você pode querer investigar este assunto mais detalhadamente, uma vez que você precisará aprender a sintaxe, e regras para aplicação disto em diferentes situações. Para conhecer a especificação completa do CSS, visite o endereço Para o propósito desta sessão, vamos ver o básico. Uma folha de estilo (Style Sheet) é uma coleção de regras (Rules). Uma regra (Rule) é uma combinação de um selecionador (Selector) e uma ou mais declarações (Declarations). Uma declaração (Declaration) tem duas partes : Propriedade (Property) e Valor (Value). Este é um exemplo de uma simples regra : h1 { font-weight: bold; font-family: Elephant; font-size: 16pt; color: rgb(0,0,128) } "h1" é um Selecionador. Ele seleciona o elemento no qual a Regra se aplica, neste caso, Header 1. As Declarações para este Selecionador estão entre chaves. Por exemplo, "font-weight: bold" é uma Declaração de Propriedade / Valor que inicia o Header 1, a regra para o texto é que ele deve ser negritado (bold). Note que as Declarações são separadas por ponto e vírgula. Outro conceito importante a conhecer neste ponto é sobre Classes. Classes são utilizadas para definir múltiplas regras para elementos na página. No exemplo dos diferentes tipos de hiperlinks na mesma página, pode ser utilizadas 3 diferentes Classes. Para definir uma Classe para um Selecionador, você pode adicionar um ponto após o Selecionador, seguido pelo nome da Classe. Aqui estão três classes criadas para diferentes hiperlinks em uma página:

21 FrontPage 98 Web Design II Página 23 a.first {font-family: Comic Sans MS; font-size: 12pt; color: rgb(0,0,255); font-weight: bold; textdecoration: none } a.second { font-family: Arial; color: rgb(255,255,255); font-weight: bold; text-decoration: none; background-color: rgb(0,0,255) } a.third { font-family: Brush Script MT; background-color: rgb(255,255,0); color: rgb(128,0,128); fontweight: bold; text-decoration: blink } O "a" (de âncora ) é um Selecionador para um hiperlink. Observe os nomes das classes após cada "a." Os Selecionadores são simplesmente códigos HTML que determinam os elementos. Por exemplo, um hiperlink sempre inicia com o código "<a href=...". Observe o "a" no início do comando. Então para escrever as Declarações, simplesmente digite o Selecionador dentro das tags de comentários no editor, seguido por um espaço. Clique no botão Style na caixa de diálogo. Você verá a seguinte caixa de diálogo aparecer : Tudo que você tem que fazer é usar estas tabs para definir as propriedades que você deseja para seus elementos / classes, e o FrontPage escreverá o código para você. Agora que você tem o sua Folha de Estilo, você está pronto para começar a utilizá-la em suas páginas web. Isto é relativamente fácil de fazer com o FrontPage 98. Por exemplo, se você quiser aplicar um estilo para um hiperlink, criar o hiperlink, ou clicar com o botão direito do mouse sobre um hiperlink já existente e selecionar hyperlink properties do menu popup. Então clique no botão Style na caixa de diálogo resultante. Você verá uma lista de classes disponíveis que você criou para aquele elemento. Selecione o estilo que você quiser, então clique OK e pronto, você tem um elemento com estilo"