curso de formação e soluções web

8/7/2019 Curso de formao e solues web

1/90

Casa e Cia Frontpage 1TODOS OS DIREITOS RESERVADOS. Proibido a reproduo total ou parcial, por qualquer meio ou processo, grfico, reprogrfico,

vdeo grfico. Vedada a memorizao e/ou a recuperao total ou parcial em qualquer sistema de qualquer parte dessa obra. Aviolao punvel como crime conforme Lei n 5.988 de 14/12/73, Lei dos Direitos Autorais.


2/90


3/90

Casa e Cia www.casaecia.arq.br - Rua dos Sabias, 453 CJ. Apolo / Afonso Pena So Jos dos Pinhais Paran BRCep: 83045- 610 Email: [email protected] [email protected]

*Conceituao de Html.

*Os diferentes editores de Html.*As diferenas de linguagens.*Conceitos de Java, Xml Dhtml, Java script.*Bancos de Dados e Formulrios.*O projeto como inicio de tudo.*Glossrio.*Conhecendo o programa Microsoft FrontPage 2000 (portugus).*Barra de ferramentas do FrontPage.*Configuraes bsicas do FrontPage.*O que um Frame e Pgina-branca.*Conhecendo os arquivos do FrontPage.*As diferentes formas de visualizaes do FrontPage.*Utilizando os modelos padres do FrontPage, (vantagens e desvantagens).

*Conhecendo as ferramentas para a edio de imagem e textos do FrontPage.*O que um editor de imagens e suas vantagens.*Alguns editores de imagens, textos e programas para suporte ao FrontPage.*Digitando textos, inserindo imagens e componentes no FrontPage.*Imagens:*O comando inserir imagem:*Plano de fundo (Background) com imagens:*Cuidados com o seu Plano de fundo:*Imagens entrelaadas:*Exibindo a barra de ferramentas de Imagem:*Inserindo Figuras:*Criando uma imagem mapeada (rea interativa):*Criando um texto sobre a imagem

*Criando um texto sobre a imagem:*Exibindo uma parte de uma figura:*Transformando uma figura colorida em preto e branco:*Alterando o Brilho e o Contraste:*Criando um efeito "boto" em uma imagem:*Alterando o tamanho da imagem:*Criando e configurando uma tabela, propriedades dentro do FrontPage e na web.*Definindo e trabalhando com o hyperlink (externos e internos).*Criar um indicador:*Salvando e arquivando uma pgina criada no FrontPage.*Os comandos avanados do FrontPage (sliders, banners, permuta de figuras).*Criando um Boto:*Opes Avanadas do Boto em foco:*Adicionando botes em frame:*Letreiros digitais:*Efeito de HTML dinmico:*Formulrios:*Criando um Formulrio:*Caixa de texto de uma linha:*Inserindo texto no formulrio:*Inserindo mais um campo no formulrio:*Inserindo uma Caixa de texto ou seleo:*Inserindo uma caixa de seleo:* Inserindo um Caixa de texto de rolagem:*Trabalhando com os botes no formulrio:*Enviando os dados do formulrio:


mailto:[email protected]:[email protected]


4/90

*Criar uma pgina de confirmao e atribu-la a um formulrio:*Retornando informaes ao visitante a partir de um campo de formulrio:*Busca interna no site:*Editando os resultados da pesquisa:*Tutorial bsico para animao GIF no flash 5 BR.*Publicar sua Web:*Antes de publicar sua Web:* Alguns servios a serem oferecidos por um provedor:*Publicando / Transferindo arquivos com Microsoft FrontPage 2000:*Como as extenses de servidor afetam a publicao:

*Escolhendo os arquivos a serem publicados:*Gerenciando os arquivos no servidor Web:*Enviando pginas para o servidor usando FTP.*Instalando o WS_FTP.*Transferindo Arquivos com o WS_FTP.*Como divulgar seu Site em equipamentos de buscas (Meta tags sim ou no?).*Cadastrando a sua URL em 20.000 sites de busca ou apenas 20?*Muito cuidado com a descrio do seu site:*Configurando Meta Tags da sua pgina para os motores de busca:*Criando Meta Tags com o FrontPage:*Entenda como os mecanismos de busca fazem o "rankeamento" das pginas.*Escolha as palavras-chave mais adequadas.*Usando as palavras-chave dentro do contedo da pgina.

*Nmero de palavras-chave dentro do contedo da pgina.*Melhore a sua popularidade em links*Dicas do mecanismo de busca Yahoo!*Dicas do Google.*Dicas do Inktomi*Dicas do FAST Search (AllTheWeb. com).*Dicas do MSN Search.*Outras consideraes.*Links interessantes:*Pense um pouco.*Alguns erros do webdesigner so imperdoveis.*Curiosidades:*A internet e sua histria.

*World Wide Web W W W:*Urls & Links :Uniform Resource Locator U R L:*Histrico Java*Caractersticas da Linguagem:

Conceituao de Html.Podemos dizer que HTML o tijolo com o qual se constri todas as pginas da internetou que o

pilar mestre da Web. Documentos em HTML ou Hiper Text Markup Language so arquivos decomputador que contenham os textos no padro ASCII(formato somente texto). Um arquivo em HTML denominadodocumento ou pgina. Um conjunto de informaes, sobre um determinado assunto, editado,em pginas e armazenado em um computador denominado Site. As pginas, contendo textos, editadasem HTML possuem caracteres especiais, chamados de tags. Essas tags (caracteres) so os elementos,no visveis na pgina do navegador (browser), que configuram (posicionam / delimitam / localizam) eFormatam (especificam a forma, o tamanho e o espaamento) os textos nas pginas de um site. No nossa inteno instruir os alunos para que editem textos em HTML porm, como veremos mais frente, uma boa coisa quando reconhecemos, nos textos de scripts HTML, alguns comandos (ordens/ rotinas).

Vejamos agora como o conjunto funciona examinando alguns comandos bsicos de HTML.No incio da pgina vem as tags que vo possibilitar a interpretao do padro de linguagem usado e logodepois o titulo da pgina qualquer e assim sucessivamente.Para iniciar um cdigo de ao usado um < comando>assim, com os sinais < e > simplesmentefechados sem qualquer smbolo especial , quer dizer que o inicio do cdigo e para terminar usamos o, o sinal de / aps do indica o fimdo nome do comando. Para se iniciar uma pgina em HTML necessrio fazer o seguinte: digite no inicio depois: todo o contedo de seu site e no final .




5/90

Obs: Voc pode usar o seu bloco de notas(NotPad) para editar em HTML. Assim como aprender um novoidioma, basta que saibamos qual o conjunto de letras (palavras em um novo idioma) que devemos utilizarpara que obtemos a comunicao; no nosso caso o importante a visualizao da pagina.

Veja o exemplo de uma pgina:Nome do site

Centralizado na pagina pgina

o seu texto ir aparecer aqui

tudo aqui ficar em negritotudo aqui ficara sublinhadotudo aqui ficar em itlico aqui tudo ficara centralizado em sua pginaTexto com um direcionamento qualquer

interessante dizer que o texto (qualquer) descrito entre as tags so lidos peloprograma, mas se no for uma descrio conhecida, ou um comando vlido ele abandona e prosseguepermitindo que seja possvel inserir descries sobre os comandos; como vimos no incio e no final oexemplo anterior com as descries (

Uma estrutura de HTML dividida da seguinte maneira:< HTML > Incio< HEAD >< TITLE > ............ < /TITLE > Cabealho de Ttulo< /HEAD >< BODY > Corpo do HTML ( Contedo )< /BODY >< /HTML > Fim

Formatao de Fontes< FONT > com suas opes Determina a fonte< FACE > - Muda o tipo da fonte< COLOR > - Muda a cor da fonte< SIZE > - Muda o tamanho da fonte> para relacionar os trs captulos anteriores:Inserir Listas< OL > Rtulos de listas ordenadas< UL > Rtulos de listas no-ordenadas< LI > Que define o contedo da lista para as duas opes.Criao de Links< A HREF=nome do arquivo htm Criao de Tabelas< TABLE > Com opes como:< BORDER > - Define uma borda na tabela< WIDTH > - Define o tamanho da tabela< TR > Permita a criao de novas linhas na tabela< TD > Define o contedo da tabela< ALIGN > Alinha o contedo de uma clula na tabela< COLSPAN > Mescla colunas< ROWSPAN > Mescla Linhas

Diviso da tela em frames :< FRAMESET > com opes como:< COLS > Divide a tela em colunas< ROWS > Divide a tela em linhas< SRC > Define o nome do arquivo HTML< NAME > D um nome para o Frame ( apelido ).




6/90

Formatao.Os principais comandos de estilo de texto so:

Comando---------Sintaxe------------------FunoNegrito------------"B"-----------------Aplica o estilo negritoItlico------------"i"-----------------Aplica o estilo itlicoSublinhado---------"U"-----------------Aplica um sublinhado(no funciona em alguns browsers)Strong------------"Strong"-------------Similar ao negritoTyperwriter---------"TT"---------------Deixa o texto com espaamento regularBig-----------------"BIG"--------------Aumenta a fonte e aplica negrito

Small--------------"SMALL"-------------Reduz e altera a fonteSobrescrito---------"Sup"--------------Eleva o texto e diminui seu corpoSubscrito-----------"SUB"--------------Rebaixa o texto e diminui seu corpoPulsante-----------"BLINK"-------------Faz o texto piscar(no funciona em alguns browsers)Color: ----------Este parmetro especifica a cor do texto ou fundo ou etc.

Seu valor pode ser especificado em hexadecimal, RGB ou por meio de um nome predefinido, comomostramos abaixo. O FrontPage permite a graduao da intensidade da cor em uso, porm saiba que a corapresentada no quadro de cor do windows, quando alterada, pode no ser visualizada exatamente comovoc v no seu programa. A cor exposta no browser do seu cliente; da pessoa do outro lado do seuprovedor, da pessoa que visualiza sua pagina... A visualizao do Matiz do brilho e da intensidade da corvai depender nica e exclusivamente da configurao do monitor nas propriedades de Vdeo.

Cor - Aqua- Cdigo - #70db93

Cor - Black- Cdigo - #000000Cor - Fuchsia - Cdigo - #ff00ffCor - Green - Cdigo - #00ff00Cor - Brown - Cdigo - #800000Cor - Olive - Cdigo - #808000Cor - Silver - Cdigo - #e6e8faCor - White - Cdigo - #ffffff

Cor - Blue - Cdigo - #0000ff

Cor - Cyan - Cdigo - #00ffffCor - Gray - Cdigo - #c0c0c0Cor - Lime - Cdigo - #32cd32Cor - Navy - Cdigo - #23238eCor - Red - Cdigo - #ff0000Cor - Teal - Cdigo - #008080Cor - Yellow - Cdigo - #ffff00

*Os cdigos e os comandos podem ser representados em letras maiscula ou minscula.

Como podemos ver; editar um Site em HTML seria muito desgastante; solicitaria ateno ededicao de nvel para que tudo estivesse de acordo, ainda mais quando se tem o conhecimento de quequalquer pequena alterao, em alguma dessas tags poder fazer com que boa parte do servio no seja

visualizado em um browser(programa de navegao). A utilizao de editores HTML, s vem facilitar eproporcionar ganhos de tempo na criao de paginas webs.

Poderamos fazer aqui uma lista, quase que infinita, de editores HTM disponveis no mercado, noentanto, vamos citar alguns dos mais conhecidos softwares (programas), com conceituado nvel deaplicabilidade e uso pela comunidade web. Como qualquer bom produto a venda no mercado, a qualidadevaria de acordo com a destinao e a necessidade de cada usurio final. Com essa afirmao tentamosesclarecer, a todos, que cada produto possui uma abrangncia e um volume de limitaes que, por sua vez,definem seu custo projetado para utilizao por um pblico alvo com caractersticas prprias. Noexistindo dessa forma condies de se afirmar qual seria o melhor programa entre os tantos existentes; naverdade o mais conveniente as suas necessidades, com custo mais accessvel, torna-se, com facilidade omais atraente.

Diferentes editores de HTML:Dreamwever- Muitos so os recursos agregados a esse programa nas diversas edies de sua evoluoque o torna um dos mais complexos. Este programa possui um grande nmero de usurios devido a suaidade, sua compatibilidade com outros programas que do suporte a suas limitaes (sem verso emportugus at o ano 2001).HotMetal Pro Considerado, tambm um bom programa composto por inmeros recursos. Possui umainterface de leitura muito pratica e rpida (sem verso em portugus).AceHtml Pequeno e prtico possui, muitas das ferramentas essenciais dos grandes programas (semverso em portugus).Bragasoft Visual HTML Tambm pequeno, com o mnimo necessrio para confeco de uma pgina.Possui os tutoriais em portugus.

Existem diferenas visveis entre os programas, acima, citados; porm o programa que vamosutilizar possui uma caracterstica fundamental que difere da maioria desses programas, especficos, para




7/90

edio em HTML. A facilidade de ser um editor de totalmente traduzido para o Portugus e a garantia deum programa distribudo pela Microsoft que faz do FrontPage, o editor mais usado no Brasil.

Sendo um dos mais completos softwares do ramo; possuidor de uma trabalhabilidade impar,totalmente voltado para a complexidade do nosso idioma; o FrontPage, vai ser, com certeza, a melhorferramenta para sua futura tarefa, participando com 95% de todo o seu servio, deixando 5% por conta dosincrementos de funes especiais e segurana.

O FrontPage no edita somente os cdigos html; possui ferramentas que configuram e editam emDHTML, em Java, e Java scripte ASP, alm de criar conexes alguns bancos de dados e produzirformulrios complexos. Porm essas ferramentas devem ser usadas com certas reservas. Durante o cursoiremos deixar bem claro quais seriam as penalidades por algumas pequenas limitaes do programa. A

principio basta saber que as limitaes baseiam-se simplesmente na megalomania egocentrista do nossoamigo Bil Gate.

As diferentes linguagens:No vamos definir, uma a uma quais as diferenas existentes entre as diversas linguagens, pois

isso seria desnecessrio ao aprendizado, trazendo uma bagagem de informaes confusas para serabsorvida em pouco tempo e pouco acrescentaria ao momento. Podemos apenas esclarecer, em que sebaseia a existncia de tantas linguagens diferentes para a mesma transmisso de dados via internet.

Como j vimos anteriormente a linguagem HTML principalmente voltada para transmisso dedados descritivos (textos). Ela possui marcaes padronizadas limitando-se a troca de informaes. Assimsendo essa linguagem no d suporte a interatividade, a troca automtica de informaes entre oscomputadores, propiciando dessa forma, a criao de outras linguagens, que venham a suprir as falhasexistentes, as lacuna causada na evoluo interminvel da internet. A novssima linguagem XML, que

muito mais voltada a objetos, considerada uma evoluo do HTML, parte basicamente deste principio que permitir maior velocidade na transmisso de dados alm de possibilitar essa interabilidade entre diversoscomputadores. Mas preciso tomar cuidado com as novidades. Essas novidades podem no servisualizadas nos browsers antigos. A ASP (Active Server Pages - Pgina de Servidor Ativa) um ambientepara programao por scripts no servidor, que voc pode usar para criar pginas dinmicas, interativas e dealta performance.Os scripts rodam no servidor e no no cliente. o prprio servidor que transforma os scripts em HTMLpadro (cdigo fonte fica preservado), fazendo com que qualquer browser do mercado seja capaz deacessar um site que usa ASP.Para utilizar ASP em suas homepages, voc precisa atender aos requisitos acima. Uma situao ideal utilizar o Microsoft FrontPage 2000 ou o Microsoft Visual InterDev (parte do Microsoft Visual Studio) paraeditar as pginas, mas isso no necessrio. Voc pode chegar l apenas usando o Notepad.Antes de qualquer coisa:

Uma outra linguagem que esta muito em pauta o PHP que significa: Hypertext Preprocessor.Realmente, o produto foi originalmente chamado de Personal Home Page Tools; mas como se expandiuem escopo, um nome novo e mais apropriado foi escolhido por votao da comunidade. Voc pode utilizarqualquer extenso que desejar para designar um arquivo PHP, mas os recomendados foram.php , .phtml.O PHP est atualmente na verso 4, chamado de PHP4 ou, simplesmente de PHP.

PHP uma linguagem de criao de scripts embutida em HTML no servidor. Os produtospatenteados nesse nicho do mercado so as Active Server Pages da Microsoft, o Cold fusion da Allayers eas Java Server Pages da Sun. O FrontPage no d suporte para visualizao de paginas em PHP mas,veremos algo mas sobre essa linguagem em Curiosidades ou consulte o Sitehttp://www.php.net/manual/pt_BR/ para ter uma panormica completa. No momento podemos dar umapanormica dessas trs linguagens. Da mesma forma que vimos, com o HTML, todas as outras seguem omesmo padro, ou seja, existe um caberio que define a linguagem, a descrio de pgina, o contedovisualizado e um fechamento; ento compare.

uma estrutura de HTML.< html > incio< head >< title > ......< /title > ttulo< /head >< body > html contedo / php /asp/script/xml< /body >< /html > fim

Uma estrutura de PHP< html > incio< head >< title > ......< /title > ttulo< /head >< body< /body >< /html > fim

Uma estrutura de ASP< head >< title > ......< /title > ttulo< /head > fim




8/90

Como podemos observar a base da transmisso de dados na rede o tradicional HTML. Pode sedizer que alguns arranjos foram criados para que houvessem ganhos reais na velocidade, na segurana eprincipalmente na interatividade na transmisso de dados pela rede mundial.

Conceitos de Java, Xml e Java script:Java O Java ao mesmo tempo um ambiente e uma linguagem e de programao, produzido pela SunMicrosystems, Inc. Trata-se de mais um representante da nova gerao de linguagens orientadas a objetose foi projetado para resolver os problemas da rea de programao cliente e servidor. Desde o seu incioem 1992, surgiram muitas outras aplicaes para o Java. O Java tem a capacidade de criar programasauxiliares, que podem ser usados para montar documentos HTML particularmente interessantes; veja mais

detalhes no final da apostila, em curiosidades.DHTML um aperfeioamento da Microsoft para o HTML verso 4.0 que permite criar efeitos especiais,como textos que se desprendem da pgina, uma palavra de cada vez ou o efeito de giro da transio doestilo de mensagem entre pginas. Entretanto, alguns navegadores da web no oferecem suporte DHTML, de modo que as pginas que contem DHTML podem no ser exibidas adequadamente ou podemser definidas, por alguns browsers como Erros na exibio do site.Xml Criada em 1996, a linguagem vem sido citada na possibilidade de ser a evoluo doHTML. As perspectivas com essa linguagem so to grandes, que empresas como Microsoft, Sum e IBMesto investindo pesado no desenvolvimento da mesma. Vamos esperar que logo possamos visualizar emqualquer browser. Curiosidade: Parte das pginas webs do Word, verso 2000 j so editadas em XMLJavascript H muito tempo j era conhecido o padro de linguagem script. O prprio Visual Basic, assimcomo o Java, possui a sua derivao. Da mesma forma que a Folha de Estilo (VB), o Javascript, foidesenvolvido para dar maior diagramao, dinamismo e versatilidade a navegao.

Podemos dizer que como uma seqncia de tags, com comeo e fim, que determinam uma funoespecfica, acionada pelo cliente, dentro da pgina, proporcionado uma certa interatividade entre o visitantee a sua pgina HTML.

Bancos de Dados e formulrios:Apesar de serem contedos completamente diferentes; pode-se dizer que so aplicativos com

finalidades muito prximas. Ambos, formulrios e Banco de dados, so criados para interagir entrecomputadores; receber e prestar informao s pessoas que naveguem por suas pginas. Um Banco deDados (que um aplicativo especifico para executar algumas aes), pode conter vrios formulrios (queso simplesmente scripts). Os scripts, que podem ter a complexidade de vrias linguagens para efetuaralgumas aes, podem interagir tal qual um banco de dados, porm a grande diferena entre o Banco deDados e o Formulrio est na capacidade facultada ao Banco de Dados de trocar, guardar, gerenciar etransmitir as informaes trocadas na rede.

O projeto como inicio de tudo:

1 ConsideraesO que ns vemos influencia o que sentimos e facilita o entendimento das informaes. A

informao visual uma comunicao de modo no verbal, mas tem um impacto muito forte. fato; que acomunicao visual pode influenciar o emocional de uma pessoa e at motiva-la a serts atitudes. Oprojeto visual de uma pgina na Web deve ser simples de ser interpretado, porm deve ser cativante a fimde atrair o visitante navegar por entre as pginas. Pelo fato empregar efetivamente a comunicao visuala esttica uma parte que deve ser levado muito a srio. Ela ferramenta mais importante para efetivarcomunicao e manter a ateno do visitante, o resto vai ser definido por conta do contedo do seu site.

A forma que voc vai organizar as informaes nas pginas pode fazer a diferena entre comunicaruma mensagem ou deixar o usurio perplexo ou ainda desestimulado. At mesmo a funcionalidade da

pgina pode ser afetada, se ela no tiver uma apresentao bem projetada. Um bom layoutdepende docontexto em que est inserido e cumpre uma proposta maior, que, simplesmente, o aspecto decorativo, poistodos os elementos visuais influenciam uns aos outros.

O primeiro passo para se montar um bom projeto para um site especfico visualiza-lo como umnegcio. Um bom negcio: aquele proporciona; de forma simples e organizada; que um determinadoproduto, interessante uma fatia do mercado, com condies para custear aquisio do mesmo, possa darcondies concretizar essa negociao e assim produzir lucros. O incio passa pela a criao de um Planode Marketingque definir a forma na qual ser exposto o seu negcio ao mercado, ao seu futuro cliente, aoseu publico alvo. O prximo passo efetuar um Planejamento Tcnico avaliando os recursos tcnicos aserem utilizados para movimentar o seu negcio. natural, que nessa fase seja feio o uso de ConsultoresTcnicos para dar a luz quanto as ferramentas disponveis e seus custos. De posse desses dados j possvel passar para a prxima etapa: O Planejamento Financeiro vai proporcionar a visualizao completados parmetros, tendncias e limites do negcio em questo. E finalmente deve ser feito um cronograma




9/90

que venha definir metas, a luz das definies previamente planejadas, metas essas a serem perseguidas ecumpridas a todo custo, a fim de viabilizar a continuidade do negcio.

2 RecomendaesUso frames com cuidado.

O uso de frames pode ajudar o usurio a navegar no site, mas cuidado com o espao para avisualizao, com a impresso do contedo do site.Recomenda-se agrupar os diferentes tipos de informao da sua pgina na Web.Ns organizamos o que lemos e o que pensamos sobre uma informao, agrupando-a espacialmente. Nslemos uma pgina na web do mesmo modo como lemos outros tipos de informaes ou veculos; tais com

revistas e jornais. Use cores e cones para atrair a ateno e delimitar matrias existentes na sua pginaWeb. O olho sempre atrado por elementos coloridos antes dos elementos em preto e branco e pordesenhos antes do texto e assim possvel criar um caminho monitorado para a absoro do contedo dapgina.

Respeite as convenes de layoutde leitura da informao.Em pases ocidentais isto significa caminhar pela informao no sentido de leitura natural da

esquerda para a direita e de cima para baixo. Dessa forma, prioritariamente, as informaes mais atraentesdevem estar localizadas no canto superior esquerdo; motivando uma parada inicial para vislumbrar amensagem e a partir da parte-se para conduzir o visitante ao final da pgina mas deve-se pretender que elecontinue visitando as demais pginas... Isso geralmente facilita a compreenso da informao pelo usurio.Quando projetar a organizao e a composio de elementos visuais da sua pgina na Web, recomenda-serespeitar os seguintes princpios: hierarquia de informao, foco e nfase, estrutura e equilbrio, relao

entre os elementos, legibilidade e fluxo dos texto, e unidade de integrao.

5.1 Hierarquia de InformaoEste princpio diz respeito disposio da informao dentro de uma pgina na Web baseada em

sua importncia relativa com os outros elementos visuais. O resultado dessa disposio afeta todos osoutros princpios de organizao e composio de um layoute determina que informao o usurio v e oque ele encorajado a fazer primeiro. Para considerar este princpio, faa estas perguntas:

Qual informao mais importante para o usurio? (Em outras palavras, quais so as prioridadesde um usurio quando encontra seu site?).

O que o usurio quer ou precisa ver em primeiro, segundo e terceiro lugar na hierarquia dainformao pretendida, e assim por diante? ( O que o usurio v primeiro deve corresponder prioridade do usurio).

5.2 Foco e nfaseO princpio do foco e nfase auxilia o usurio na colocao de itens prioritrios. Determinar o foco

envolve identificar a idia central, ou o ponto focal, por atividade. Determine a nfase escolhendo oselementos que devem ser proeminentes, isolando-os de outros elementos ou fazendo com que eles sesobressaiam de outra maneira de foram que as coisas ocorram dentro de um planejamento prvio e noaleatriamente.

Onde o usurio navega basicamente procurando por informao, por exemplo... este fato, umaimportante considerao na implementao do site, pois esse ser o foco de sua navegao e o argumentoa ser explorado na composio da pgina.

5.3 Estrutura e EquilbrioO princpio de estrutura e equilbrio um dos mais importantes de um projeto visual. Sem uma

estrutura base e o perfeito equilbrio dois diversos elementos no haver atrativo ao visitante. H falta deordem e de significado afeta todas as outras partes de projeto visual. O mais importante que a falta deestrutura e equilbrio torna uma pgina na Web mais difcil de ser entendida pelo usurio.

5.4 Relacionamento de ElementosO princpio do relacionamento de elementos refora o princpio anterior. A colocao de um

elemento visual pode ajudar ou atrapalhar a comunicar uma mensagem, atraindo ou desvirtuando a atenodo leitor. No se pode ainda deixar de ter o cuidado em envolver todas as pginas com um contexto maiore global do site o qual faz parte.

5.6 Unidade e IntegraoO ltimo princpio; unidade e integrao, reflete na avaliao dada a pgina na Web em relao ao

site ao qual ela pertence. Quando uma pgina na Web visualmente unificada com o site (endereo),Casa e Cia Frontpage 9

TODOS OS DIREITOS RESERVADOS. Proibido a reproduo total ou parcial, por qualquer meio ou processo, grfico, reprogrfico,vdeo grfico. Vedada a memorizao e/ou a recuperao total ou parcial em qualquer sistema de qualquer parte dessa obra. A

violao punvel como crime conforme Lei n 5.988 de 14/12/73, Lei dos Direitos Autorais.


10/90

O usurio acha mais fcil navegar porque ela oferece um ambiente de navegao consistente eprevisvel. Para implementar este princpio, considere o seguinte:Como as diferentespginas do site funcionam visualmente?Como o projeto visual da pgina se relaciona com as outras pginas do site ou de outros sites em que usada? importante lembrar que os usurios podem acessar sua pgina por qualquer uma das pginasdo seu Site provenientes de site e ferramentas de busca.

3 ObservaesUma pgina na Web precisa funcionar intuitivamente - ela precisa parecer do modo como funciona e

funcionar do modo como parece.

Cuidado com o tamanho, o espaamento e a colocao da informao para que o ambiente sejavisualmente consistente e previsvel.A estrutura visual importante para comunicar a proposta dos elementos exibidos em uma pgina.Voc pode usar cores (cor de fundo) para agrupar assuntos correlatos.Use o alinhamento adjacente para links que formam um grupo de opes de assuntos exclusivos.O uso de texto deve ser o mnimo possvel para comunicar o mximo relativo a informao.Para minimizar o movimento dos olhos, onde possvel, o usurio deve ser inquirido a responder em umarea diretamente adjacente questo

As reas para entrada de texto (quando houver) devem estar to perto quanto possvel da base datela devido ao fato de que a maioria dos usurios no so exmios datilgrafos e precisam olhar para oteclado.

O incio, ou a base da tela, so os melhores locais para mostrar informaes sobre orientao, asquais devem estar sempre visveis e de fcil acesso.

As orientaes para o usurio podem ser colocadas em reas fixas ou mveis, ou apresentando-asem menus pop-ups disponveis (sempre sobre exclusiva requisio do usurio ou do prprio erro).

Glossrio

Arranjo simtrico - Composio que apresenta elementos semelhantes em ambas as metades.Cores complementares - So as cores que se encontram opostas no crculo cromtico, como por exemploo vermelho e verde.Cores monocromticas - Cores produzidas por um nico canho de eltrons (dispositivo emissor de luzusados nos monitores de vdeo). As cores policromticas so produzidas por trs canhes de eltronsdiferentes (Red, Green e Blue).Cores neutras - So as cores que aumentam a visibilidade das outras cores, como os vrios tons de cinza.Croma = saturao - Pureza da cor dentro da escala do cinza a variante mais viva da cor percebida.Fadiga visual - Cansao visual causado pelo nmero excessivo de elementos visuais ou cores em umanica pgina.Fonte - Conjunto das letras do alfabeto, nmeros e sinais desenhadas de modo caracterstico.Fonte com largura varivel - Fontes que possuem larguras diferentes para letras que apresentam largurasdiferentes, por exemplo o "e" e o "i". Tipos Grficos - Legibilidade, 6, Ideografia, 1986)Grid - Uma grade composta de linhas verticais e horizontais.cone - Alguma coisa que se parece com o seu significado. Ele representativo e de fcil compreenso.Ex.: Uma trao de tinta significando uma linha geomtrica em uma ilustrao no livro texto.Layout- Organizao espacial, diagramao de elementos visuais que compem uma pgina na Web.Legibilidade - Diz respeito a habilidade do leitor de encontrar, identificar, discriminar e absorver o texto comsucesso.Leiturabilidade - Diz respeito a facilidade de interpretao e apelo do texto.Luminncia = brilho = valor

- Quantidade relativa de claro ou escuro em uma escala do preto ao branco(tambm chamado de intensidade).Matiz = tom (Cor) - Composio do comprimento de onda espectral da cor que produz a percepo de serazul, laranja, marrom, etc. (Marcus, 1992) a variao qualitativa da cor.Memria de curto termo - Tambm chamada de memria de trabalho, dura cerca de 20 segundos e capaz de armazenar cinco palavras ou formas, seis letras, sete cores e oito dgitos.Peso - Quantidade de massa de uma fonte, por exemplo, uma fonte com estilo bold pesada.Poluio visual - Efeito causado pelo uso de um nmero excessivo de elementos visuais em uma nicapgina na Web.Projeto visual - Organizao espacial, diagramao de elementos visuais que fazem parte de um sitecompleto.Ponto - Unidade de medida da letra. Um ponto equivale a 0,325 mm.Smbolo - Um sinal que pode ser completamente arbitrrio na sua aparncia. Ex.: Uma bandeira para

representar uma pas.Casa e Cia Frontpage 10




11/90

Conhecendo o FrontPage:

O Microsoft FrontPage 2000 considerado um dos melhores programas na criao de web sites, ese voc pensa que precisar dominar algumas linguagens de programao para obter sites com aparnciaprofissional, ficar surpreso em saber que o FrontPage capaz de executar automaticamente quase todasas tarefas de programao que voc precisar.

Iniciando o FrontPage 2000:

Para iniciar o FrontPage 2000 clique no cone doprograma que est em Iniciar/Programas/ Microsoft FrontPage.

O FrontPage um completo editore de Pginas Web, simples verstil e de fcil aplicao.Trabalha com uma visualizao chamada wysiwyg (what you see is what you get /o que se v o que setem). Dessa forma voc pode visualizar ao mesmo tempo em que cria as suas pginas, exatamente comoelas sero exibidas na rede.

As pequenas, limitaes do FrontPage foram definidas pela prpria evoluo das tecnologias dacomputao. Voc ver a facilidade com que o Programa se apropria de ferramentas, compatibilizandoqualquer efeitos no seu visual. Voc pode criar suas Pginas, (todo o contedo do seu Site) no seu prpriocomputador, com a possibilidade de fazer simulaes, para visualizar efeitos, de aproximadamente 98% docontedo total de suas pginas, sem estar conectado a internet.

Barra de ferramentas do FrontPage:Uma das coisas que facilita muito o aprendizado observada, logo de incio: ao se examinar a barra

de ferramentas do Frontpage observa-se que muito parecida com a do Words. Alguns ttulos de funes,logicamente so diferentes e ou so substitudos. Porm a linha principal de menus (desdobramentovertical de diversos tpicos de diversos assuntos) na barra ferramentas fundamentalmente o mesmo.

Configuraes bsicas do FrontPage:O programa no necessita de qualquer configurao adicional prioritariamente. Mas um toque pessoal nos permitido: Primeiramente para aumentar a nossa rea de trabalho vamos desmarcar a Barra de Modos eLista de Pasta, em exibir / Barra de Modos de exibio e Lista de pastas.Em arquivos / visualizar no navegador, caso voc possua, em seu computador, vrios tipos de browsers(programas de navegao ), ser necessrio configurao de um nico visualizador padro para serutilizado, automaticamente pelo programa, durante os servios. Vamos ver as configuraes padres doseu programa: No necessrio alteras as configuraes...

Clique em Arquivo/Propriedades:Casa e Cia Frontpage 11




12/90

Em propriedades da pgina, voc pode formatar o titulo da pgina (Guia Geral), cor do planofundo (Guia Plano de fundo), cor do hiperlinkativo ou visitado, cor do texto e margens. Para formatar a corou uma figura para o plano de fundo de sua pgina, a melhor opo entrada em formatar/plano de fundo:dentro da caixa de dialogo, na guia plano de fundo voc poder faze-lo com mais segurana. Caso queirainserir uma figura de fundo marque a caixa: Figura de plano de fundo Clique em procurarselecione uma

figura entre os seus arquivos e clique em OK.Na parte inferior do vdeo, na sua barra de tarefas possvel voc verificar configurao automtica doprograma, para uma determinada condio de visualizao de sua pgina.Conforme as configuraes apresentada na figura abaixo, a pgina exibida levaria (0) zero segundos paraabrir totalmente no seu browser, quando acessada atravs de um moldem de 28 Kbs. Alterando essaconfigurao voc modifica as condies de visualizao de sua pagina de acordo com a sua expectativa,para o tempo, que o equipamento do seu visitante, necessitaria para abrir as suas pginas.

Frame e pginas em branco:

O FrontPage um programa que oferece diversas Folhas de estilos diferentes. Quandonavegamos em alguns Sites, observamos que existem duas formas de apresentao muito distintas e bemdefinidas entre si. Algumas pginas se apresentam totalmente lisas e outras, visivelmente, apresentamdiversas janelas de visualizao dentro de uma mesma pgina. Nessas faixas normalmente so colocados

alguns banners ou logomarcas, ou ainda os links do seu Site na forma de menu. Essa faixa chamada deCasa e Cia Frontpage 12




13/90

frame. Os frames, quando configurados para a utilizao em um Site cria uma mobilidade muitointeressante. Essa modalidade configura, permanentemente, algumas das paginas do seu site, pois essastero um formato especialmente definido ra serem exibidas em dois ou mais quadros distintos, ou atmesmo, que podem variar no seu palco ou visualizador de acordo com a sua estrutura de composio.

Como vimos o frame cria uma janela onde possvel visualizar uma seqncia de outras pginas. como se cada quadro fosse uma pgina individual. Em Arquivo / Novo / Pgina na guia pgina dequadros, voc faz a opo por executar a pgina com frame, e pode escolhe ente 10 opes diferentes; queser configurada de acordo com a imagem que aparece na parte inferior da caixa de dialogo. Como vemosna figura anterior; quando necessrio for, o prprio browser providenciar a implementao das barras derolagens para cada quadro.

Sempre bom lembrar que cada evento, novo em uma pgina deve ser rigorosamente analisado,quanto sua, perfeita visualizao nos principais browsers, quanto ao tempo necessrio para sua completaexibio e quanto a segurana na exibio. Os mais pessimistas diriam que quanto menos evento a pginativer mas segura ser sua exibio... A coisa no funciona bem assim. Agora... verdadeira a afirmativaque quanto mais rpido for o evento completo da abertura de uma pgina menos esta sofrer com as




14/90

inconstncias proveniente da ao externa sob linha de transmisso alm de possveis instabilidade na redemundial.

Uma vez escolhida a disposio das pginas referentes aos frames basta confirmar com OK queser exibido na sua rea de trabalho a composio desejada.

Em cada pgina de quadro vemos a seguinte descrio:

O termo: Definir pgina inicial... destina-se a possibilidade de voc simplesmente indicar para essequadro uma pgina que tenha sido confeccionada previamente para ser apresentada no quadro emquesto; como vemos na figura que segue:

Quanto ao termo Nova Pgina: digamos que ele auto explicativo pois indica que acessando essecomando uma pgina em branco tomar conta de todo o quadro, para que seja dado o incio a suaconfeco.

Se clicarmos com a tecla da direita dentro de um quadro aparecer entre vrias outras opes umaque nos permitir configura as Propriedades do quadro.




15/90

Na parte inferior da caixa de Propriedades do quadro verificamos o boto que nos d acesso aconfigurao da paginas de quadro que uma caixa bastante utilizada pelo simples fato de possibilitar aremoo das bordas do quadro de pginas como vemos na figura que segue.

Ao tentar criar um hiperlink em uma pgina de quadros aparecer a seguinte caixa de comandos:




16/90

Na seo Quadro de destino seremos levado a uma caixa que permitir configurar, com o cursor domouse clicando sobre o quadro, qual das posies de quadro voc gostaria de indicar para ser exibida apagina definida no campo 1 que dever estar descrita na caixa denominada Endereo: melhor dizendo emqual frame ser mostrada a pgina de destino.

Nesta janela ento teremos na rea 1 poderemos escolher em qual frame ser mostrado o arquivode destino. Na rea 2,definimos o formato do quadro a ser mostrado. Na rea 3 ser transcritoautomaticamente o que foi definido acima, sendo que abaixo dessa nos possvel definir essa configuraocomo padro permanente do programa.

Transio de pgina:

Este um efeito que se refere s condies de apresentao inicial e a transio entre as pginasdo site ; um diferencial que pode chamar a ateno para pginas importantes dentro do seu site. Esteseventos so configurados acessando: Formatar / Transio de pgina onde abrir a caixa de dilogos.Se o evento for, por exemplo, sair da pagina Fechar em circulo // aparece a guia Durao onde vocconfigura o tempo necessrio para o desenvolvimento desse evento. Confirme com OK e faa avisualizao do resultado. Esses eventos so configurados para uma nica pgina permitindo criar eventospara vrias pginas diferentes.




17/90

Conhecendo os arquivos do FrontPage:

O programa quando instalado, cria toda uma cadeia de patas especificas para o arquivamento desuas pginas e imagens ( Minhas webs > images). Quando voc salvara sua primeira pgina outras pastase juntaram a elas; no devendo ser alteradas, pois isso poderia prejudicar a visualizao de todo o

conjunto de paginas do sue site. Nestas pastas o programa far a disposio de propriedades de eventos,propriedades das pginas, propriedades de imagens e demais elementos que proporcionam a devidavisualizao na web. Veja maiores detalhes em salvando e arquivando uma pgina criada.

Devemos observar que as pastas foram nomeadas com letras minsculas. Isso no por acaso... omanuseio dos dados na web, por vrios browsers deve conter uma unidade para facilitar a leitura, dosmesmos, evitando a possibilidade de erro de leitura das pginas. Assim sendo devemos evitar no nome dearquivo a ser manuseado a colocao de letras maisculas, acentos e qualquer tipo de caracteresespeciais.As diferentes formas de visualizao do FrontPage:

O FrontPage trs trs guias de visualizaes localizadas na barra de tarefas no p da pagina.

Guia normal.Onde voc digita e edita o texto, inclui figuras, componentes, cria e edita as tabelas sem se

preocupar com os cdigos HTML e como so gerados.

Guia HTML.Esta guia exibe os cdigos htmlcriados pelo FrontPage para que a sua pgina seja exibida sem

falhas. Nessa guia possvel editar, com cdigos html, algumas funes e fazer algumas alteraes ouinseres de scripts especiais previamente criados. Livros de visitas, chats ou fruns so exemplos descripts que devero necessitar de algumas configuraes em Html. Essas configuraes devero serefetuadas no Bloco de Notas e poder ser visualizada no FrontPage.

Guia Visualizao. Como o prprio nome j diz, essa guia exibe o resultado de seu trabalho (pgina web). Nessavisualizao algumas funes como Java ou Java scripts no sero visualizadas. Porm voc pode fazeruma visada panormica de toda a pgina, sem que obrigatoriamente, voc tenha de salvar o que esta feito.Para efetuar uma visualizao completa voc deve, primeiramente salvareste arquivo nas pastas corretas,e depois clicar em: Arquivo / Visualizar no navegadorou simplesmente clicar na ferramenta Visualizar nonavegador, junto a barra do menu principal.




18/90

Utilizando os modelos do FrontPage (vantagens e desvantagens):

Entrando em formatar / Tema, no menu principal; voc ter acesso a um arquivo contendoinmeros exemplos de modelos para pginas da web, possibilitando que voc agilize a confeco de suapgina. Basta escolher o tema que um assistente lhe ajudar nas modificaes possveis para personalizaro conjunto. Essa facilidade toda pode parecer muito vantajosa devido ao imediatismo na confeco de umapgina. Acontece que o designer dessas pginas esto desatualizados em relao as tendncias atuais,que de uma pgina mais limpa e com uma leitura mais clean. Um outro fator negativo que essaspginas criam vnculos grandes e pesados, produzindo uma exibio lenta, devido a carga das figurasagregadas a elas; sendo esse a sua maior desvantagem. Um outro ponto negativo est na inviabilidade decriar algumas modificaes, devido prpria configurao esttica da pgina.




19/90

Conhecendo as ferramentas para a edio de imagens e textos do FrontPage:

As barras de ferramentas mostradas na figura anterior so dois conjuntos de solues, de fcilacesso, possibilitando que voc crie uma gama de alteraes e formataes que dever suprir a maioriadas necessidades que possam surgir. O manuseio simples... Teste agora mesmo... clique sobre umafigura ou texto, demarcando qualquer um deles e divirta-se com as solues possveis.

O editor de imagens e suas vantagens.Quando vimos as configuraes bsicas do programa, comentamos que alguns elementos

adicionados a pgina poderia, interferir no tempo de abertura para visualizao da mesma. As figuras soresponsveis por uma carga muito grande dentro da pgina, mas possvel obter-se, facilmente redues

nessa carga, fazendo uso de editores de imagens. Os formatos de apresentao de uma imagem na tela esuas propriedades podem ser alterados, com muito pouco comprometimento da qualidade ou do tamanhoda figura. Dentro de um editor de imagens, voc poder obter recortes, acabamentos, modificaes e atacrescentar detalhes de continuidade ou textos as imagens. Um bom editor de imagens um acessriofundamental para a criao de pginas web. Mais a frente voc ver que recursos o FrontPage lhe oferecenessa rea.

Quando falamos em qualidade desse tipo de programa; estamos realmente falando em quantidadede artifcios proporcionados, nas possibilidades de leitura em diferentes formatos e na capacidade deedio que ele possa oferecer.

Alguns editores de imagens, textos e programas para suporte ao Frontpage:A abrangncia na utilizao de editores, para textos e imagens esta na propriedade que o programa

tenha de visualizar a grande quantidade de formatos que ambos podem adquirir.Alguns formatos de imagens, assim como algumas fontes, podem at ser capturadas pelo seucomputador, porm, podem no ser visualizadas, ou sofrer alteraes que prejudiquem a qualidade noconjunto da pagina exibida, por falta das propriedades da fonte ou do browser para a visualizao.

Passamos agora a citar alguns programas de boa qualidade e que possuam afinidades junto aoFrontPage e suas caractersticas bsicas.

Adobe Photoshop Genial. Vai permitir a voc criar alteraes cirrgicas em imagens em muitosformatos com grande qualidade.

3D studio Max Pioneiro em animaes para filmes, pois permite acabamentos em imagens e textosem 3D.




20/90

Corel Draw Talvez... o mais completo programa para o desenho e a criao de imagens em um grandenmero de formatos com vrios softwares / aplicativos.

Macromedia Flash Especificamente projetado para criar animaes para Web possui uma imensido deefeitos especiais e grande numero de aplicativos associados.Anfy Team Possui uma grande quantidade de scripts prontos, que podem ser reconfigurados epersonalizados para utilizao na sua web; porm sua composio em Applets Java sensvel e pode noser visto corretamente quando ocorrer algum problema de instabilidade na rede.

WinZip Um compactador de arquivos de larga utilizao no mundo reduz at 30% do arquivo.

Download accelertor Um gerenciador dedownloads de boa afinidade com o windows, que realmentepode ampliar a velocidade de captura de arquivos em at 300 %.

CuteFTP Programa essencial para a transferncia de arquivos entre a sua mquina e a maquina doprovedor de webs.

Os programas citados possuem ferramentas fundamentais para quem pretende levar a srio aedio de pginas webs. Excetuando os programas de edio de imagens citados, os demais soencontrados na rede com facilidade entre muitos outros equivalentes e ou similares. Outra coisa muitointeressante que quase todos podem ser encontrados no idioma portugus do Brasil.

Digitando textos, inserindo imagens e componentes no FrontPage.Para iniciar a insero de um texto em sua pgina ser preciso descrever as propriedades da fonte,

da cor, do tamanho e etc... por exemplo: .Essa seria a descrio da fonte a ser utilizada em um texto; mas no se preocupe com essas tags.

Elas sero inseridas na sua pagina automaticamente pelo programa; voc no vai ter de escrever nadaalem do seu texto, configurar sua fonte e pronto. Tudo feito como os editores de texto convencionais,como no Word, por exemplo. O programa cria os cdigos necessrios formatao de fonte cor, tamanhoda letra e a fonte. Voc pode testar esses artifcios, digitando, normalmente um texto, selecionando com omouse e clicando em Negrito Itlico Sublinhado; com a ferramenta abaixo ou entrando em FormatarFonte.

Clicando nas caixas, conforme demonstrado abaixo tambm possvel formatar outros detalhes; comoinclusive possvel definir estilos de textos para ttulos e etc...

Numerao / Marcadores:O texto por vezes precisa de uma descrio formatada com cones ou at com itens numerados o

que muito fcil de se obter com as ferramentas que segue.

Par afixar ou retirar a numerao ou marcadores; basta selecionar o texto em foco, com o auxilio do mousee depois clicar no cone correspondente.O texto ficar com no exemplo abaixo:Exemplo de Numerao:

1. Apostila Linux:2. Apostila Novel3. Apostila Unix4. Apostila Windows

O texto ficar com no exemplo abaixo:Exemplo de Marcadores:

Linux: Novel Unix Windows




21/90

Imagens:

Incluir uma imagem em uma pgina HTML uma tarefa bem simples e que requer alguns requisitosbsicos. A imagem exibida deve estar disponvel preferencialmente nos formatos GIF ou JPG. O formatoGIF o que mais se popularizou no incio da Web. Porm o formato JPG tomou o seu lugar pelasvantagens que oferece em termos a carga de tamanho da imagem. No formato JPG, uma imagem pode serreduzida em at dez vezes comparada ao seu tamanho original.

O comando inserir imagem ou

Para inserir uma figura na sua Home Page, voc deve usar o comando inserir / imagem no menuprincipale optar porarquivo ou clip art. Voc deve pensar na imagem como se ela ocupasse o lugar de umcaractere na linha onde inserido o comando. Se voc colocar mais de uma imagem em seqncia, asimagens sero exibidas na mesma linha, se o tamanho permitir. Para que a imagem aparea sozinha emuma outra linha da tela necessrio coloca-la em uma tabela para facilitar a edio. Esse assunto serdiscutido mais a frente. Uma imagem tambm pode ficar centralizada, na horizontal ou vertical, para isso,basta usar os mesmos comandos de alinhamento de texto conforme desenho abaixo.

Para a edio de textos e imagens sempre possvel acessar aspropriedades da tabela em que esta envolvendo o objeto a ser editado.

Plano de fundo (Backgrounds) com imagens:Usar uma imagem ou criar um fundo colorido pode ser necessrio em algum momento para a sua

pgina. Voc pode ir mais alm e usar um plano de fundo, muito mais, elaborado com o uso de pequenasimagens, ou fazer uso de algum script Java que crie algum efeito especial (como: neve caindo, porexemplo). A imagem ser espalhada por toda a pgina de modo a preencher o fundo da tela. O uso dessatcnica permitir que voc utilize para o fundo da sua pgina o logotipo de sua empresa, uma foto ou umapaisagem, etc...

Cuidados com o seu Plano de fundo:Antes de comear a usar imagens para o fundo da sua Home Page, voc deve considerar alguns

pontos importantes.Um aspecto importante dessa tcnica que a imagem utilizada deve ser de carga pequena, pois aocontrrio, levar muito tempo para o browser carregar a pgina. Para evitar isso, a vai a dica: use imagens

com menos de 10 Kb de tamanho, na medida do possvel.Procure usar imagens com poucas cores para evitar que o texto fique difcil de ser lido. Algumas imagensfantsticas ficam horrveis como segundo plano.

Procure usar uma imagem de fundo do menor tamanho possvel. Se quiser criar uma textura defundo, crie uma imagem que tenha a largura da tela (800 pixels) e com a altura de 5 ou 10 pixelsno mximo. Como a imagem de fundo inserida uma primeira vez e depois copiada para preencher o restoda tela, voc ter o efeito de ter uma nica figura de fundo.

Evite usar uma figura no fundo com muitos contrastes co o conjunto das informaes exibidas napagina. A legibilidade no pode, em hiptese alguma, ser prejudicada. Nesses casos, interessante tentarmudar a cor do texto para obter clareza, ou at mesmo desistir do fundo. Voc pode at mesmo usar umagrande imagem no fundo, porm, observando o tempo que ela levar para ser transferida (exibida,carregada no browser). Toda vez que uma imagem especificada como background, a tela exibidainicialmente com o fundo padro (cinza ou branco), e s depois a figura transferida para pgina. (Observe

as descries de cada item ser exibido na pgina que esta sendo aberta no browser; na barra de tarefas,ao p da pgina.)

Prefira sempre um fundo com pouca variao de tons, com baixa intensidade luminosa,contratando, ai sim com a luminosidade do texto, das imagens e demais informaes conferidas a pgina.Lembre-se sempre de que o maior foco de ateno de uma pgina a informao transmitida por meio dotexto e das imagens ilustrativas da informao. No prejudique o contedo de seu site em funo de umaimagem que no acrescentar nada informao muito mais necessria.

Imagens entrelaadas:Uma caracterstica da imagem GIF pode ser bastante til na utilizao em suas pginas. A primeira

a possibilidade de usar um fundo transparente para a imagem de modo que ao ser carregada, a cor defundo da imagem desaparece, permitindo a visualizao do fundo da pgina. Uma imagem GIF com fundotransparente pode ser gerada por intermdio de diversos programas de tratamento de imagem. Mesmo




22/90

uma imagem existente pode ser facilmente convertida com o uso de editores de imagens ou com a

ferramenta (definir cor transparente) na caixa de ferramenta de edio de imagens do FrontPage.

Exibindo a barra de ferramentas de Imagem:Talvez voc no tenha visto esta barra de ferramentas porque ela no foi ativada. Vamos fazer umaexperincia: crie uma nova pgina, insira uma imagem qualquer nela e clique sobre o grfico. Dever

aparecer em algum lugar da janela uma barra como a que est a cima:

Caso no aparea; voc pode acionar essa barra de ferramenta no menu principal escolhendo aopo Exibir / barra de ferramentas e depois verifique se a opo "Imagem" tem uma marca antes dela.No? Ento clique sobre a opo. Agora a janela dever estar visvel. A seguir iremos ver algumas funesdesta ferramenta.

Inserindo Figuras:Vejamos agora como inserir, na sua pgina, uma figura, do Clip arts ou de um arquivo j

digitalizado:

Para inserir uma figura, do Clip-arts ou de umarquivo clique em:Inserir / Figura Clip-arts ou ArquivoLocalizar a figura e proceder conforme comando dacaixa de dilogos.

Criando uma imagem mapeada (rea interativa):Com o FrontPage, voc pode pegar uma figura e criar, em vrias partes dela, links para um local diferente.Vamos ver um exemplo bem ilustrativo: suponha que voc tenha uma imagem do mapa do Brasil e queiraque, quando clicasse em cada estado, o browser fosse para uma pgina com um conjunto de informaesrelativas aquele estado. Com as reas interativas, isto perfeitamente possvel. Os botes da barra de

ferramentas de imagens que utilizamos para o mapeamento de imagens so os seguintes:

1- Boto de seleo. Com ele, voc seleciona um determinado mapeamento na sua imagem.

2- Cria um mapeamento com uma rea retangular. Basta clicar neste boto, e na rea da sua imagem,desenhar a rea de mapeamento como se estivesse desenhando um retngulo em um programa grfico(clique no ponto inicial e arraste o mouse sem soltar o boto at que tenha desenhado a rea desejada).Esta rea pode ser modificada posteriormente atravs do boto de seleo.

3- Cria um mapeamento com uma rea circular. O funcionamento semelhante ao mapeamento de rearetangular.

4- Cria um mapeamento com formato polgono. Muito utilizado para formas irregulares. Basta que vocclique sobre o boto e depois no ponto inicial do seu polgono na imagem. Mova o mouse para o pontoseguinte e clique. E assim continue, at que volte ao ponto inicial e feche o polgono.

5- Realar reas interativas. Serve para destacar um ou mais efeito interativo em uma figura. Para us-lo,basta clicar no boto, com um mapeamento selecionado ou no. A imagem dar lugar a um fundo branco eos mapeamentos estaro destacados em cor escura.




23/90

Vamos ver um exemplo prtico. No seu FrontPage, crie uma nova pgina e, insira uma imagem. Clicandosobre a imagem, ir aparecer a barra de ferramentas de imagem...

Agora, tente criar um mapeamento retangular sobre o quadrado amarelo dentro da imagem. Depoisque voc desenhar o retngulo, aparecer a caixa de dilogo pedindo para especificar qual pgina ser olink daquele mapeamento.

Depois de pronto, voc pode solicitar uma visualizao na pgina. Se passar o cursor do mousesobre o quadrado amarelo, pode-se perceber que naquela rea existe um link para outra pgina. Tente criaragora um mapeamento circular e depois um mapeamento poligonal seguindo uma das regies do mapa.Para alterar o tamanho de um mapeamento, selecione-o atravs do boto de seleo (1) e depois posicioneo cursor do mouse, sobre um dos pequenos quadrados escuros que esto em volta do mapeamento.Clicando sobre e eles e arrastando, voc ir tambm alterar o formato do mapeamento.

Criando um texto sobre a imagem:Voc pode tambm colocar texto sobre uma imagem. Por exemplo: sobre a figura do mapa anterior,podemos colocar os nomes dos produtos que eles produzem. Continuando o nosso exerccio anterior, clique

sobre a imagem do mapa para ativar a barra de ferramentas de imagem, e clique sobre o boto texto .Ir aparecer uma caixa e texto, vazia na imagem, com um cursor de texto piscando, basta digitar o texto quevoc quer. Voc pode alterar o tamanho do mapeamento, arrast-lo atravs da imagem e alterar aformatao da fonte atravs da barra de formatao do FrontPage. Tambm se pode criar hyperlinks paraos textos. Veja um exemplo de como ficaria nosso mapa com essa opo:




24/90

H uma observao importante a fazer: Quando voc usa esta ferramenta, as imagens geradascom os textos, sobrepostos, sero gravadas numa pasta "_derived". Portanto, se voc for atualizar a suapgina via FTP (com a funo "Publish" no tem problema), lembre-se de enviar tambm esta pasta.

Tornando uma cor de imagem transparente:Como j vimos fcil deixar uma determinada cor de uma imagem transparente (ou seja, no lugar dela,aparecer a cor ou imagem de fundo da pgina). No nosso exemplo, vamos deixar a cor azul do mapa

transparente. Clique na imagem e depois no boto definir cor transparente da barra de ferramentas deimagem. A partir da, na imagem, clique na cor que voc quer que fique transparente (no nosso caso, a cor

azul). Veja o resultado abaixo:

Exibindo uma parte de uma figura:Da figura de um grfico, por exemplo, podemos ter interesse em exibir somente uma parte dele em

um setor de uma descrio. Pode-se usar um editor grfico para recortar um pedao da figura, ou seno oboto Cortarda nossa barra de ferramentas. De um clique na figura para exibir a caixa de ferramentasFiguras.

AntesDepois

No modo de exibio Pgina, clique na figura; e depois...

Clique em Cortar , na barra de ferramentas Figuras.

Uma caixa de corte aparece sobre a figura.Clicando e arrastando as alas da caixa, redimensione-a para incluir a parte da figura que voc desejamanter. Para voc mesmo desenhar a caixa de corte, clique fora da mesma, porm dentro da figura e, emseguida, desenhe a caixa.

Clique em Cortar novamente para remover a rea que est por fora da caixa de corte.

Para colocarmos uma figura, seja ela qual for, como plano de fundo preciso ter o cuidado de queela no fique competindo com a visualizao do contedo da pagina; fazer com que ela no atrapalhe aleitura informao principal contida na pgina. Uma boa opo, muitas vezes, pode ser a funo Desbotar,que deixa a figura mais clara. Para utilizar este recurso em sua pgina; clique na figura e depois no boto

branco e preto . Veja o resultado abaixo:




25/90

Transformando uma figura colorida em preto e branco:

O boto branco e preto faz com que uma figura fique em preto e branco. s clicar na figura e

depois clicar neste boto. Para restaurar, clique nela e depois no boto restaurar .

Rotacionando e espelhando uma imagem:Agora, vamos ver o conjunto de botes abaixo:

1- Gira a imagem 90 graus esquerda.

2- Gira a imagem 90 graus direita.3- Faz um espelhamento horizontal da imagem.4- Espelhamento vertical da imagem.Para aplicar o efeito na imagem, clique sobre ela e depois em um dos botes acima.

Alterando o Brilho e o Contraste:Temos na caixa de ferramentas, quatro botes para alterar o brilho e o contraste de uma imagem. So eles:

1- Aumenta o contraste.

2- Diminui o contraste.3- Aumenta o brilho.4- Diminui o brilho.Para aplicar as alteraes, a regra a mesma: clique sobre a imagem e na caixa de ferramentas deimagem, use um dos botes acima.

Criando um efeito "boto" em uma imagem:

Para criar este efeito, clique sobre a imagem e depois sobre o boto chanfrar . Uma outra opo inserir a figura em uma tabela e trabalhar com as propriedades da tabela para criar um efeito de ressalto, ourebaixo, por exemplo. Veja o resultado, do boto chanfrar; abaixo, na nossa figura do mapa:




26/90

Alterando o tamanho da imagem:Para alterar o tamanho de uma imagem, basta clicar nela e com o cursor do mouse, posicione-se

em um dos quadrados pretos em volta da figura. A partir da, clique e arraste o cursor do mouse e a figuraalterar o seu tamanho. Vale lembrar que isso s altera o tamanho de exibio.

A figura no arquivo permanece no tamanho original. Dessa forma ser informado ao Browser quedeve apresentar a imagem com o tamanho definido manualmente. Isso no interfere por exemplo, com acarga que afigura possui no seu tamanho original: Se a figura / uma foto 12X7 cm escaneada em composta por uma carga de 80 Kbs e voc fora a visualizao em um tamanho de 4X2 , ela ainda assimcontinuar com a carga de 80 Kbs. Aps alterar, manualmente o tamanho da figura, voc dever de clicar

no boto criar nova amostra e dessa forma proceder a alterao da imagem definitivamente, napagina e no arquivo e assim reduzir proporcionalmente a sua carga, em valores que sero definidos pelarelao do resultado encontrado na reduo da imagem.

Criando e configurando uma tabela e suas propriedades no FrontPages.Encontrar ferramentas para configurar a posio e o alinhamento, vertical / horizontal; no espao,para um texto ou imagem fcil, veja as opes que seguem:




27/90

Esse tipo de posicionamento vai condicionar a pgina e a clula de uma tabela, como uma nica coisa.

Para facilitar a criao de um bom lay out de uma pgina, definitivamente voc ver que se tornanecessrio e at mesmo imprescindvel a diviso prvia da pgina na forma de uma tabela; previamente,editada, dividida, para obter a composio esperada, quanto ao posicionamento dos diversos setoresnecessrio da pgina. Ai ento dever ser utilizado as ferramentas para melhorar, com ajustes finos, aposio de textos ou figuras no interior de cada clula da tabela.

A utilizao da tabela vai garantir com muito mais qualidade que a sua pgina seja vista na formaque foi projetada; reduzindo as possibilidades de deformao das posies vista nos browsers de terceiros.

A figura ao lado exibe a configurao bsica dobrowser da Microsoft o Internet explore. Caso sejaalterada essa configurao fatalmente causar

deformao de algumas pginas

As tabelas so acessadas nabarra de menu principal,entrando em tabela ou

atravs da ferramentaprpria.

Para dar incio aos trabalhos no FrontPages, faa um projeto do lay-out de sua pgina, definindo asdevidas posies de cada coisa no arranjo geral. Por Exemplo:




28/90

A tabela acima foi obtida da seguinte forma:Conforme o desenho ao lado.Mesclando a linha superior, a partir do mouse.E dividindo a clula inferior esquerda em 04 linhas, a partir do mouse.

Para modificar o aspecto de uma tabela voc dever clicar com a tecla direita domouse sobre a clula, ou selecionar as clulas a serem modificadas e localizar najanela de texto o que pretende fazer; conforme a figura a baixo.

As tabelas e a clulas, possuem diversas propriedades que define a sua forma, cor, espessura etipo de bordas, transparncia, posicionamento interno, tamanho etc... Para acessar essas propriedadesbasta seguir o procedimento anterior e na janela selecionar as devidas propriedades. Depois na caixa queabre voc configura como quiser.




29/90

Leia atentamente todas as informaes contidas em cada caixa de dialogo, teste seus efeitos.Qualquer configurao feita aqui s ter efeito sobre a tabela utilizada para tal; no causando efeitos emoutras tabelas da pgina. Essas caixas de dilogos sero utilizadas vastamente na configurao de suastabelas; no futuro. Uma configurao se tornar um padro nos servios. Em Bordas / Tamanho, aconfigurao sendo alterada para zero deixar a tabela invisvel durante a visualizao.

Definindo e trabalhando com Hiperlinks (interno ou externo).At agora voc aprendeu a criar documentos interessantes, mas que poderiam ter sido gerados

diretamente com um editor de texto. A principal atrao da Internet a criao de documentos com oconceito de hipertexto, ou seja, um documento que ligado a outros por meio de conexes especiaischamadas hyperlinks. Com esse conceito, voc pode criar documentos que faam referncia a um endereoqualquer do computador ou da web e permitem ao usurio acessar essas referncias, no importando seelas esto em outra pgina da web, no seu micro ou em qualquer servidor da rede.O uso de hipertexto tambm facilita a criao de documentos extensos, cujas sees ou tpicos podem serrapidamente acessados por meios de links. Imagine que voc cria uma pgina sobre um determinadoassunto, no qual vrios tpicos so abordados. Assim como um livro, voc cria todo o texto do documento e,depois, um sumrio no incio indicando os tpicos desse documento. Se quiser acessar diretamente o textode um tpico, basta clicar sobre o item do tpico no sumrio e ele ser imediatamente exibido.

O grande atrativo da Internet e da Web a possibilidade de trazer o mundo para a sua rea de trabalho comum clique do mouse.

Um Hiperlinkou como iremos usar link, o caminho, ativo, com a funo de acionar a abertura deuma nova pgina. Essa pgina ao ser aberta poder ser apresentada da seguinte forma:Excluindo a pgina exibida para a abertura da nova pgina acionada, ficando apenas a nova pgina aberta.(Mesmo quadro)Abrindo mesma sobre a pgina atual se colocando em primeiro plano, porm deixando ambas abertas.(pgina inteira) Abrindo a nova pgina com tamanho reduzido (uma pequena caixa) deixando ambasabertas. (nova janela)

Um hiperlink quando acionado deve levar um arquivo, a um indicadorou pgina web. Se apgina acionada se encontra dentro do seu site chamado de hiperlink interno. Quando um hiperlink

acionado, em uma de suas pginas e o seu browser direcionado a uma pgina de um outro site; fora doseu, denominado de hiperlink externo.

Para obter o artifcio do hiperlink, basta selecionar uma figura ou uma poro de texto; acionar o

cone inserir hiperlink e encontrar na lista do seu Site o endereo ou digitar a URL da pginapretendida, ou ainda digitar local onde encontra-se o arquivo ou o texto do indicadorque deseja acessarcom o link.

A caixa de dilogo exposta partir do cone de hiperlink, conforme figura abaixo; exibe uma lista dearquivos de pginas web j confeccionada anteriormente. Clicando sobre uma delas cria o direcionamentopara o link, a mesma aparecer descrita automaticamente na caixa URL. Caso queira navegar at umadeterminada pgina na Web, basta clicar no cone apropriado. Se desejar possvel digitar o caminho dolink externo ou interno.

possvel tambm transformar o ponto de aplicao de um hiperlink em um boto direcionadocom um endereo de correio para receber; por exemplo; ou sugestes sobre os servios prestados no seuSite. importante lembrar que o caminho referente ao hiperlink um texto que ser manuseado comouma propriedade da Web, portanto no deve conter caracteres especiais, maisculas, acentos ou espaos.




30/90

Criar um indicador: (marcador)

Um indicador um direcionamento entre um texto selecionado uma poro de texto em umapgina da web. Voc pode usar indicadores como destino para um hyperlink. Por exemplo, voc pode usarindicadores para navegar em uma pgina extensa que contenha cinco ttulos. Crie um indicador em cada

ttulo e, na parte superior da pgina, adicione um ndice analtico que liste esses ttulos. Cada entrada nondice analtico um hyperlink que usa um ttulo indicado como destino. Para criar o indicador basta vocselecionar, com o mouse, o texto que deseja que seja acessado como indicador; esse ser o destino de umhyperlink. Independente de estar ou no na mesma pgina; selecione um texto ou imagem que deseja tercomo referencia (indicador) para um determinado arquivo ou texto suplementar o indicador. Clique com atecla direita do mouse sobre o texto demarcado e depois em hyperlink; como na figura abaixo. Voctambm pode; aps selecionar o texto a ser lincado, clicar direto no cone do hyperlink no menu principal,conforme mostrado na figura abaixo.

A caixa de dilogos de criar hiperlink, ter na suaparte inferior a guia: indicador. Abrindo essaguia; devero estar descritos todos os textos demarcados, basta ento selecionar o desejado. Veja a figuraabaixo.




31/90

Quando o visitante do site clica no hyperlink, (Tapetes) a parte de texto relacionada de qualquer queseja a pgina ser exibida dentro da janela do navegador; nesse exemplo teremos o texto: Saiba como.

Salvando e arquivando uma pgina criada:Como j foi dito em Conhecendo os arquivos do FrontPage, existem cuidados a serem tomados na

hora de salvar uma pgina. O programa tem uma organizao prpria, muito peculiar, que deve serrespeitada e no deve ser alterada de forma alguma, pois s assim garantimos para que as informaesnecessrias possam ser encontradas pelos diversos browsers. Para entender perfeitamente o que estamos

informando basta pegar uma pgina j salvada: clicando em cima de uma figura exibida na pgina, com atecla direita do mouse, aparecer uma janela onde voc poder solicitar que seja exibida a propriedade dafigura. Na parte superior do quadro geral, dentro da caixa de texto consta a descrio do nome e da devidaposio onde se encontra a figura. Dessa forma se essa descrio no condiz com a verdade; pois vocmudou a imagem de lugar, a mesma no ser exibida no browser, pelo fato de no ser encontrada nalocalizao especificada.

Ao salvar uma pgina, o programa organizar,automaticamente, todo arquivo referente a cada propriedade depgina, incluindo toda a hierarquia necessria a perfeita exibio.Tudo ser arquivado partir da pasta Minhas Webs. Caso ela notenha sido criada na instalao do programa poder ser criada

conforme o caminho abaixo.

Dentro de minhas webs, junto aspginas, devero ficar aspropriedades de interatividade dosarquivos de Java ouJava script.




32/90


33/90

O fato ocorre, pois o nome do arquivo dever ser manipulado pelo browser com propriedade web;esse o endereo que dever ser digitado na rea de descrio do browser, conforme indicamos seguir:http://www.url.provedor(quando sem domnio)/nome_do_arquivo.htm (protocolo e endereo completo sercomentado mais a frente em curiosidades).

A primeira pgina, a pgina inicial, aquela que ser o indexador de todo o seu site receber o tituloindex.html. Esse termo indica ao browser que as informaes contidas em tal URL dever ser acessadas

partir dele e assim sendo dever ser interpretado como a pgina inicial.

Todas as demais pginas sero descritas com o nome de arquivo que melhor convir e somente.Dessa forma o programa ir descrever, automaticamente como arquivo.htm, assim sero todas as demaispginas internas do seu site.

2) Clicando na tecla Alterar... uma pequena caixa de dilogo aberta par que voc digite um ttuloou mensagem que queira ver exibida no topo do browser de visualizao a sua pgina. Como essadescrio exclusiva da pgina e ser manipulada como texto, pode ser descrita livremente, com qualquertipo de caractere desejado.

Agora podemos clicar na tecla Salvarpois esta quase tudo definido, restando definir aspropriedades da figura o que ser possvel na caixa que se abrir na seqncia; conforme figura abaixo:

A figura que esta descrita para ser salva, um Clip art, que precisar ser renomeada com um nomeconhecido e fundamentalmente com letra minscula. Basta para isso clicar em Renomeare proceder aalterao. Antes de dar o OKser preciso que seja verificado, na guia Pasta a exata descrio quanto alocalizao em que a figura ser salva. Essa descrio dever ser identificada como a pasta images, queest dentro dasua pasta geral de Webs (Minhas webs).Os comandos avanados do FrontPage (sliders, banners, letreiros digitais, permuta de figuras, formulrios esons).

Como dito na rede, o que veremos agora como turbinar as pginas de um site. O FrontPagecontm uma grande quantidade de ferramentas que permitem criar artifcios muito teis.




34/90

A figura anterior exibe o desdobramento do Menu Principalonde se encontram os mais utilizadosrecursos do programa.

Esses so componentes utilizados para criar

planilhas e grficos que sero transcritos paracdigos de html. A base de utilizao dessasferramentas ser definida conforme o uso padro doprograma Excel.

Esses componentes so muito teis e fceis de usar. Suaaplicao ser visto caso a caso. E importante frisar que osartifcios baseados em tecnologia DHTML podero no servisualizado corretamente em alguns browsers; por exemplo oNetscape > 3.0.

- Esse um artifcio para a criao de banners. Podemos dizerque seu aspecto o de um projetor de slides; um expositor seqencial de imagens ou textos-imagens, emintervalos regulares de tempo que apresentam diversas formas de serem expostos, denominados comoEfeitos de transio.

As imagens e os textos-imagens (textos editados e salvos como imagem), devero ser preparados,em um Editor de imagens, previamente, com propriedades e tamanhos similares para serem utilizados poreste efeito em sua pgina.

Tendo preparado as imagens que sero utilizadas no seu banner, basta colocar o cursor do mouseno respectivo espao, na pgina e clicar na guia do menu correspondente para ter na tela a caixa dedilogos onde ser configurado o seu banner.




35/90

Agora passamos a configurar o efeito na caixa de propriedades do gerenciador de anncio em faixa:A primeira configurao definir o tamanho do banner que est sendo feito. Caso queira, voc

poder esta digitalizando manualmente, com o auxilio do mouse, clicando e arrastando o efeito paraadequ-lo a sua figura.

Na seqncia iremos configurar o efeito de transio:

Os diversos efeitos descritos na figura ao lado daro um toquetodo especial no seu banner. Teste cada um deles para conhecermelhor como se definem.

A velocidade em que os slides sero expostos configurado na guia: Mostrar cada figura por (segundos).

Se este banner necessitar de um link externo basta digitar o direcionamento da URL completo naguia vincular a:

Se o link for interno voc deve clicar no boto procurar e seguir at a pgina desejada.Agora s resta adicionar cada figura na ordem desejada e clicar em OKpara finalizar a configurao

do efeito.




36/90


37/90

Criando um Boto:No menu Inserir, escolha a opo: Componentes e depois: Boto em foco. Aparecer ento a janela dedilogo abaixo:

No campo Texto do boto (1), colocado o texto que ir aparecer no boto. O estilo de letra destetexto determinado clicando no boto Fonte (6). No campo Vincular a (2) digite o endereo URL do linkdeste hover. Se a pgina de destino estiver dentro do seu site, voc pode selecion-lo clicando no botoProcurar(7).

O campo Cor do boto (3) determina a cor original do Boto. O campo Cor do plano de fundo (8)define a cor de fundo do Boto. Este campo s til quando utilizarmos figuras - veja adiante. O efeitoespecial no boto escolhido no campo Efeito (4), e a cor deste efeito no campo Cor do efeito (9). Oscampos Largura (5) e Altura (10) determinam a largura e altura do boto (em pixels), respectivamente. Oboto Ok(11) Finaliza a configurao.

Opes Avanadas do Boto em foco:

Agora vamos nos aprofundar um pouco mais. Clicando no boto Personalizar(11), aparecer uma novacaixa de dilogo.

Com estas opes, poderemos fazer coisas muito mais interessantes do que j foi visto. Em primeiro lugar,veremos como fazer Boto com sons. O campo Ao clicar(12) diz qual o arquivo de som que ser tocadoquando o usurio clicar sobre o Boto. Neste campo digita-se o caminho do arquivo ou se este no estiver




38/90


39/90

Na rea 1 aparecer o contedo do seu site, onde voc poder navegar e selecionar o arquivodesejado, se ele estiver l. Se o arquivo estiver no seu computador e no dentro do seu projeto de site, vocdeve usar o boto 3 e selecionar o arquivo do seu disco e traz-lo para o site.

Depois disso, no momento em que voc salvar a pgina, o FrontPage Editor ir perguntar em quallocal do site voc ir copiar os arquivos selecionados. A partir da, o Boto dever funcionar.No coloque na rea 2 endereos de caminhos para arquivos do disco do seu computador, tipo:"c:\Imagens\teste.gif" Dessa forma o Boto no encontrar o arquivo.

Adicionando botes em frame:

Complementando o nosso artigo sobre Botes, mostraremos agora como utiliza-los em pginas que usamframes.

Vamos supor que voc necessite criar uma pgina composta por dois frames, ou melhoresclarecendo: em uma nica exibio no browser dever ser mostrada duas reas distintas e diferentesentre si para a visualizao de contedos de pginas diferentes em cada uma dessas partes. Uma

ocorrncia grande esta no exemplo onde uma pagina exibe um menu, sendo exibida como uma pequenafaixa, suficiente apenas para conte-lo e todo o restante mudar exibindo cada pagina solicinada por essehiperlinks. Veja o exemplo abaixo:

No exemplo anterior mostramos um menu formado por Botes que quando acionado, qualquer doslin

curso de formação e soluções web

Documents