Dreamweaver cs5 -_apostilando_com

83
D D R R E E A A M M W W E E A A V V E E R R C C S S 5 5 Desenvolvida exclusivamente para o Apostilando.com por Marcos Paulo Furlan

description

dreamweaver

Transcript of Dreamweaver cs5 -_apostilando_com

  • 1. DREAMWEAVERCS5Desenvolvida exclusivamente para o Apostilando.com por Marcos Paulo Furlan

2. NDICENDICE .......................................................................................................................................... 2ADOBE DREAMWEAVER ........................................................................................................... 4PROJETO DE UM SITE................................................................................................................ 5Criando documentos ....................................................................................... 8 Propriedades da pgina ............................................................................ 10Interface ........................................................................................................ 14 Formas de visualizao............................................................................. 15 Visualizao do Documento ...................................................................... 16 Paletas ...................................................................................................... 16 Barra de Propriedades .............................................................................. 17TRABALHANDO COM TEXTOS................................................................................................ 17Pargrafos e Layout .................................................................................. 21Pargrafos e Quebras de linha ................................................................. 21Ttulos ....................................................................................................... 22Texto Pr-Formatado ................................................................................ 22Listas ......................................................................................................... 22Recuando Texto ........................................................................................ 23Caracteres Especiais em HTML................................................................ 23Linhas Horizontais ..................................................................................... 24IMAGENS .................................................................................................................................... 25Mapas de Imagem .................................................................................... 28Criando Rollovers simples......................................................................... 29Image Placeholder .................................................................................... 30CONTEDO MULTIMDIA.......................................................................................................... 30Insero de Animaes Flash (SWF) ........................................................ 30Flash Vdeo ............................................................................................... 32HYPERLINKS ............................................................................................................................. 34Links Absolutos e Relativos ...................................................................... 34Os nomes de caminho absolutos .............................................................. 34Criando Links ............................................................................................ 35ncoras ..................................................................................................... 36Criando a ncora ....................................................................................... 36Chamando o link da ncora ...................................................................... 36Links para e-mail ....................................................................................... 37TABELAS .................................................................................................................................... 37Clulas ...................................................................................................... 40Tabela Modificada ..................................................................................... 42FOLHAS DE ESTILO .................................................................................................................. 42Editando uma folha de Estilos ................................................................... 45Criando uma classe .................................................................................. 45CAMADAS E POSICIONAMENTO ............................................................................................ 472 3. Posicionamento CSS ................................................................................ 48 Posicionamento absoluto versus relativo .................................................. 48 Criando Camadas ..................................................................................... 48 Escolhendo as TAGS ................................................................................ 50 Aninhando Camadas ................................................................................. 51 Criando Frames Embutidos (IFRAME) ......................................................... 51FORMULRIOS .......................................................................................................................... 53 Os elementos de um Formulrio ............................................................... 53 Tipos de campos de formulrio ................................................................. 54COMPORTAMENTOS ................................................................................................................ 58 Adicionando Comportamentos .................................................................. 58 Pop-ups ..................................................................................................... 59 Ocultar Mostrar camadas .......................................................................... 60 Validando Formulrios .............................................................................. 63ABA SPRY DREAMWEAVER ................................................................................................. 65 Spry MenuBar ............................................................................................... 69 Spry Accordion ............................................................................................. 73 Spry Collapsible Panel .................................................................................. 73 Spry Tabbed Panels ..................................................................................... 74 Spry Tooltip................................................................................................... 76 Spry Validao de Formulrio.................................................................... 77CONCLUSO ............................................................................................................................. 833 4. ADOBE DREAMWEAVERO Dreamweaver no s outra ferramenta de visual de HTML. Ele faz o quetodos os melhores editores fazem: cria tabelas, edita quadros e alternafacilmente da visualizao de pginas para visualizao HTML.Mas o Dreamweaver vai alm dos outros editores para permitir criar animaese pginas dinmicas (DHTML). O Dreamweaver suporta completamente asfolhas de estilo em cascata (CSS), bem como camadas e comportamento deJavaScript. Ele tambm inclui sua prpria ferramenta de animao DHTML. Eum cliente FTP repleto de recursos, que incluem mapas visuais do site, estembutido dentro dele.Quando iniciar o Dreamweaver pela primeira vez, voc ver uma janelaprincipal, que permite a voc criar documentos estticos (HTML) e dinmicoscomo Coldfusion, PHP, ASP, ASP. NET e arquivos CSS.Nessa tela, voc tem na esquerda os documentos abertos recentemente ouabrir um arquivo existente. Na tela central, podemos definir os tipos de arquivosa serem criados. Na tela da direita ele apresenta alguns templates. Na opoExtend, existe o link Dreamweaver Exchange, que permite voc acesse o setordo site da Adobe onde poder ter acesso a extenses dos programas Adobe. 4 5. Embora no seja um pr-requisito para utilizar o Dreamweaver, de extrema importncia que ao criar um site voc tenha uma base da linguagem HTML. Pois mesmo para o entendimento do que serapresentado durante essa apostila, para muitas coisas ele ser necessrio.PROJETO DE UM SITENo Dreamweaver podemos editar pginas HTML nicas como podemosgerenciar sites, ou seja, controlar todo o projeto que est sendo feito, o que recomendado para a construo de seu site.Na tela que se abre na coluna do meio temos a opo Dreamweaver SiteClique nessa opo. Ele vai abrir um assistente de criao do ambiente site.Nessa etapa voc deve dar um nome ao seu site e a pgina onde ficarolocalizados seus arquivos.Clique em Servers. Depois no boto Add new server (sinal de mais). 5 6. Somente preencha esta etapa se voc tiver um servidor web. Caso contrriono preciso preencher. Voc tambm poder voltar a esta telaposteriormente para preench-la. Clique em Save. 6 7. Na barra lateral direita agora ele mostra as configuraes de seu ambienteSite.No Dreamweaver possvel se trabalhar em vrios projetos de site, casoprecise alternar entre eles, basta clicar nessa opo.Aqui temos a viso de seu site local (Local view - em sua mquina) e Remoteview (em seu servidor).Permitem conectar / desconectar com seu servidor.Ao clicar nessa opo, caso no tenha deixado salvo a senha, ele solicitar amesma.Ao terminar de logar, voc poder acessar a rea remota.Ao clicar na rea remota, ele lista as pastas de seu servio de hospedagem.Aqui se deve ter ateno, pois ele lista todas as pastas do servidor, o cuidado onde publicar o site. No caso do servidor utilizado, os arquivos devem serpublicados dentro da pasta public_html. Podemos configurar o nosso site para acessar a essa pasta remota 7 8. aps o login. Clique no menu site, Manage Site.Depois clique em Edit.Criando documentosO Dreamweaver tem entre suas propriedades a possibilidade de se criar sitesdentro de padres da W3C (www3c.org) que rgo que cuida dasespecificaes tcnicas de desenvolvimentos de tecnologias aplicadas websites.Ento ao se criar uma pgina HTML, ele vai criar ela no padro XHTML, que um padro que permite uma validao correta para suas pginas. XHTML uma reformulao da linguagem HTML (Hypertext Markup language) baseada na XML (Extensible Markup Language). Em termos de sintaxe, a XHTML no to tolerante como a HTML. Issoocorre porque a XHTML utiliza as rgidas regras de XML para realizar asmarcaes em um documento. Por padro a XHTML separa a TAG (elementoque permite definir qual comando ser utilizado) e as propriedades para amesma.Voc pode atravs da tela de abertura criar sue documento HTML, ColdFusion,PHP, etc., como pode tambm clicar na opo More..., embaixo de todas. 8 9. Essa opo abre a possibilidade de se criar os diversos tipos de documentos,alm de utilizar um tipo de layout, na direita da tela tm a opo de escolha dotipo de documento HTML, o padro XHTML 1.0 Transitional, mas voc podeescolher outro tipo de documento. Para saber mais sobre XHTML(http://pt.wikipedia.org/wiki/XHTML).Ao Clicar em Create, ele cria seu primeiro documento HTML.9 10. Propriedades da pginaAs propriedades da pgina so elementos que se aplicam a uma pgina inteira,em vez de somente a um objeto na pgina. As propriedades visuais incluem ottulo da pgina, uma cor de fundo ou imagem e as cores do texto e do link.Outras propriedades de pgina incluem a codificao de documento e aspastas de site, se houver.Clique em Modify, Page Properties.Na janela que se abre temos vrias categorias, a primeira delas aAppearance (Aparncia), nessa categoria podemos definir o tipo de fonte dapgina, estilo (negrito e itlico), tamanho. Cor de texto e cor de fundo, imagemde fundo e as propriedades dessa imagem (se ele se repetira ou no) emargens.Na guia links, podemos definir como sero apresentados os links, quando osmesmos forem textos. 10 11. Podemos definir a fonte dos mesmo tamanho, cd. do link (forma como ele vaiaparecer na pgina), Rollover links (muda a cor do texto quando link ao sepassar o mouse sobre ele), Visited Links (cor a ser mostrada em links jvisitados pelo visitante de seu site), Active Links (cor do texto a ser mostradaquando clicado sobre o link). Underline Style: como deve ser aplicado osublinhado em seus links, no caso da imagem est para ser mostradoconforme o mouse passar pelo link.A terceira Categoria Headings relativa formatao dos ttulos de sua pgina(O HTML permite a configurao e utilizao de at 6 tipos de ttulos) 11 12. A guia Title / Encoding, como o prprio nome diz referente ao ttulo da pgina(o mesmo que aparece na janela de seu navegador) e a codificao do HTML aser utilizada.A ltima guia referente imagem de rastreamento. 12 13. Ao se clicar em OK, ele retorna a pgina do Dreamweaver, voc pode observarque no topo da janela aparece como documento no salvo o tipo de documento e o asterisco representa que o arquivo no foi salvo, ele sempreir aparecer quando voc modificar seu documento. Para voc salvarrapidamente um documento ao qual se esta trabalhando use as teclas deatalho CTRL+S.O arquivo por padro ser salvo com a extenso html. Se o arquivo a ser salvofor primeira pgina de seu site ele deve ter o nome de index (index.html).Observe que o arquivo agora mostrada na direita junto dentro da aba FilesO nome index deve ser dado ao arquivo que ser mostrado em seusite quando o visitante digitar o seu domnio, como por exemplohttp://www.apostilando.com, ao digitar o endereo ele vai procurar em seudiretrio o arquivo index, no caso index.html, e vai mostrar ele na tela donavegador. Alguns web designers optam por usar o nome default, caso existaos dois arquivos, a preferncia fica para o index.A extenso html deve ser utilizada em pginas web que nocontenham blocos de cdigos dinmicos. Pginas que contenhamblocos de cdigo PHP devem ser salvas com essa extenso. Outrofator importante que as maiorias dos servidores de hospedagem utilizamcomo sistema operacional e servidor web Linux+Apache, isso far com que o 13 14. reconhecimento dos arquivos seja Case Sensitive (diferenciem maisculas deminsculas), ou seja, Arquivo e diferente de ARQUIVO e diferente de arquivo.InterfaceAo criar seu primeiro arquivo o Dreamweaver ele apresentar na direita opainel de opes.Onde as opes esto junto palavra Common (flechinha) ao se clicar nessaopo ela vai mostrar as demais opes de botes de insero.Na parte de cima temos a barra de documentos.Nessa barra para cada documento aberto ele mostrar uma aba, abaixo dessaaba temos os botes de forma de visualizao do documento, de ttulo dodocumento, checagem de compatibilidade com navegadores, checagem de 14 15. erros de sintaxe de cdigo, comunicao com o servidor de hospedagem,previso do documento no navegador, recarregamento da pgina (opointeressante quando a mesma foi manipulada fora do Dreamweaver com odocumento aberto), opes de visualizao de componentes auxiliares napgina, Visual Aids.Formas de visualizaoNo Dreamweaver possvel trabalha com seu documento de trs formas:Design : Essa forma a que mais se aproxima dos editores de textoscomuns, pois toda visual, bastando inserir contedos no documento e digitaros textos.Split: Essa opo divide a sua tela em duas partes, sendo a de cima apgina sendo vista atravs de cdigos e a parte de baixo de forma design.Code: Essa opo vai mostrar o seu documento sendo visto atravs dacodificao HTML, quando se tem conhecimento de cdigos HTML, emalgumas situaes essa forma de visualizao se torna mais rpida e pratica.15 16. Visualizao do Documento sempre importante ao desenvolver um site que ele tenha um comportamentosemelhante nos principais navegadores (Internet Explorer e Firefox), como oDreamweaver tambm da suporte ao device Central que permite ver seu siteem celulares.Para poder ver como ficar a sua pgina, basta clicar no boto preview/Debugin Browser.Ao clicar na opo Edit Browser List, voc pode definir qual o navegador deprioridade, adicionar ou remover navegadores, etc...PaletasO Dreamweaver como os demais programas Adobe possuem para a maioriade seus comandos paletas, posicionadas direita da tela. 16 17. Voc pode habilitar / desabilitar as paletas atravs do Menu Window.Barra de PropriedadesNa parte inferior de seu documento, ser mostrada a barra de propriedades,essa barra dinmica de acordo com o que est selecionado em seudocumento. Quando no h nada selecionado ele mostrar as propriedades detexto do documento.TRABALHANDO COM TEXTOSA formatao de textos dentro de um documento HTML muito semelhante formatao em editores de texto, com algumas ressalvas.Podemos adicionar observaes de textos invisveis chamados comentrios,como anotaes para seus documentos.Voc definiu a formatao de seu texto no inicio na configurao da pgina,essa formatao est no CSS de seu documento.Podemos mudar algumas configuraes de nosso texto, atravs do MenuFormat.17 18. No desenvolvimento de sites atualmente, no se formata mais o textodiretamente em sua TAG de chamada exemplo (texto , cria-se um estilo para a fonte e aplica-se esse estilona fonte (se o estilo for somente a uma palavra ficaria texto). Para quem usa qualquer verso anterior poder tambmfazer as alteraes pela barra de propriedades.Clique no Menu Format, CSS Styles, e clique na opo New. 18 19. Vamos gerar uma classe para a cor vermelha e negrito, para ser aplicada aonosso texto.No campo Selector Name, preencha txtvermelho, vamos deixar a formataoaplicada somente a esse documento (This document only), e clique em OK.Na prxima tela, vamos alterar a cor da fonte e o peso da fonte (font-weight). 19 20. Clique em Ok.Selecione agora o texto onde ser aplicada a classe, depois na barra depropriedades, clique na caixa para escolha da classe e escolha a classe a seraplicada.Mude a visualizao de seu documento e veja os cdigos em CSS, oDreamweaver criou a classe no CSS do documento.20 21. Pargrafos e LayoutA unidade bsica de texto em HTML o pargrafo. Enquanto o pargrafo onome especfico de texto includo pela tag

, os pargrafos podem ser maisamplamente definidos como qualquer bloco de texto especificamenteformatado. Os tipos de pargrafos incluem itens de lista, texto pr-formatado edivises.Pargrafos e Quebras de linhaNa HTML existe uma diferena entre pargrafos HTML, com os pargrafosutilizados em um editor de Textos como o Microsoft Word por exemplo. NaHTML o pargrafo faz um espaamento duplo entre um pargrafo e outro epermite por padro os alinhamentos, esquerdo (padro), centro, direita ejustificado.J as quebras de linhas apenas quebram a linha na posio e o que vier depoisda quebra ser colocado na prxima linha, como um pargrafo de editor detextos.21 22. TtulosPense em ttulos (Tambm chamados de cabealhos) como sendo o mesmoque as manchetes de um jornal. Eles so maiores que o corpo do texto de umartigo e geralmente esto em negrito. Os tamanhos de ttulos vo de 1 a 6,sendo que o maior 1.Texto Pr-FormatadoEm geral quando voc cola texto na janela de documento, ele no retmnenhuma formatao dele. Isso inclui quebras de linha, quebras de pargrafos,espaamento, tabulaes, tabelas formatadas com texto e outras mais.Se voc formatou texto em outro programa e deseja reter sua forma, voc podeinseri-lo no cdigo de HTML da pgina como texto pr-formatado. Nenhumadas outras convenes de HTML controlar esse texto; por exemplo, emHTML, somente um espao digitado ser exibido, mesmo se voc digitar 50espaos em uma linha. No texto pr-formatado, qualquer forma do texto feitacom espaos ou quebras de linha ser preservada.ListasO Dreamweaver suporta diretamente dois tipos de listas, numeradas(Ordenadas) e com marcadores (No Ordenadas). E lista de Definies.Podemos utilizar as propriedades do pargrafo para criar listas ou o MenuTexto, lista, sendo que no Menu Text, List, temos ainda a opo de lista deDefinio, que utilizada para sumrios em seu site.22 23. Recuando TextoNo h tabulaes em HTML comum, o tipo de recuo de pargrafos com cincoespaos utilizados em outros tipos de publicao geralmente substitudoconfigurando cada pargrafo como uma linha de espao em branco.Mas existem recuos de pargrafos, chamados

que faz esteprocesso.Este tipo de recuo pode ser feito atravs da barra de propriedades ou do menuFormat Indent e Outdent.Caracteres Especiais em HTMLH uma variedade de caracteres especiais em HTML que voc pode querer23 24. utilizar em suas pginas. O Dreamweaver possui alguns destes smbolos, epodem ser utilizados a partir do menu Insert, HTML, Special Caracteres.Others.Linhas HorizontaisUma linha horizontal uma linha que atravessa a pgina horizontalmente efornece uma diviso explicita em vez de implcita entre as partes de umdocumento.Para criar uma linha horizontal, clique no Menu Insert Horizontal Rule Ao criar alinha horizontal e selecion-la voc pode format-la.Podemos tambm atravs do painel Insert e escolher a opo Text.24 25. IMAGENSUm dos recursos mais utilizados em Home Pages so imagens, e os formatosmais utilizados so GIF e JPG, outro formato que vem crescendo na utilizaoem HP o formato PNG, formato reconhecido pela W3C(www.w3c.org).Para inserir uma imagem em sua HP, temos vrias formas, a mais prtica clicando sobre o boto Insert Image no painel Common , outra forma, atravs do Menu Insert, Image. aconselhvel que voc coloque todas as imagens de seu site em uma nicapasta, pois isto vai facilitar o seu trabalho e organizao do site.25 26. Voc pode criar sua pasta de imagens, diretamente pela paleta filesdo Dreamweaver, basta apenas clicar com o boto direito do mouseem alguma rea vazia dela e depois clicar na opo New Folder. 26 27. Ao se escolher a imagem a ser inserida, com definimos no inicio do projeto denosso site utilizaremos XHTML ele abre uma janela pedindo as teclas deacessibilidade, no campo ALT, deve-se preencher a descrio da imagem, nocampo Long description pode deixar em branco.Ao adicionar imagem a barra de propriedades modifica-se para aconfigurao da imagem.Quando voc tem uma figura selecionada a barra de propriedades da figura lhemostra a largura (W) e altura(H) da imagem. A opo Src corresponde ao localde sua imagem, A opo Alt preenchida anteriormente, a opo Class, permiteatribuir uma classe a imagem, estudaremos as classes posteriormente.A opo link permite transformar a sua imagem em um link, veremos esseassunto posteriormente. E temos as ferramentas de edio.Ao se redimensionar uma imagem por suas alas ao lado das medidas deAltura e largura, o Dreamweaver mostrar um boto circular que permiteretornar as dimenses originais da imagem. .Entre as opes de manipulao para uma imagem temos: Permite otimizar a imagem Ferramenta Crop, permite recortar a sua imagem, ao estar com a imagemselecionada e clicar sobre essa ferramenta, ele mostrar sob a sua imagem asalas de recorte, defina o corte e pressione ENTER. Importante, ao ser27 28. recortada a imagem somente possvel voltar atravs de o comando desfazer. Resample, ao redimensionar a imagem, possvel deixar a imagem salvacom o novo tamanho. Permite modificar o brilho e contraste da imagem Sharpen permite trabalhar o desfoque da imagemAinda temos como propriedades da imagem a opo V Space Permitecolocar um espaamento vertical entre a imagem e demais objetos, H SpacePermite colocar um espaamento horizontal entre a imagem e demais objetos.BorderPermite definir se sua imagem ter bordas ou no. A o colocar linkem sua imagem e no utilizar borda preencha o campo com 0(zero).AlignPermite definir o alinhamento da imagem em relao vertical.Mapas de ImagemPodemos inserir uma imagem em seu documento atribuir a esta imagempontos ativos que faam a ligao com outros documentos, este processo chamado de Mapa de imagens.Quando voc insere uma imagem, automaticamente na barra de propriedades,sero mostradas as ferramentas de pontos ativos retangular, elptica epolgono. Ao desenhar o ponto ativo na barra de propriedades ser mostradauma janela para que se faa o link.28 29. Criando Rollovers simplesUm rollover de imagem uma ao de JavaScript que deixar voc trocar afonte de uma imagem por outro arquivo de imagem, de modo que quando voco mouse sobre uma imagem, outra imagem aparecer.O objeto rollover image define um simples comportamento que realiza trscoisas: as imagens so pr-carregadas quando a pgina carrega, quando omouse passa sobe a imagem especificada um arquivo diferente de imagem exibido, e quando os usurios movem o mouse para fora da imagem, imagemoriginal restaurada.Para inserir uma figura de rollover podemos proceder da seguinte forma,atravs do boto Rollover Image, ou atravs do Menu Insert, Image Objects,Rollover Image. 29 30. Image PlaceholderImage Placeholder um objeto do Dreamweaver que voc pode acrescentarem seu documento no espao onde ficar uma imagem, mas que ainda noest pronta, mas que permite que voc v diagramando seu HTML, Para inseriruma imagem placeholder, voc pode clicar no menu, Insert, Image Objects,Image Placeholder, ou clicar no boto junto s opes de imagem da abaCommon.Ao adicionar a Image Placeholder, na barra de propriedades possvel definirpropriedades para a imagem. Observe que ele possui o boto CREATE quepermite acionar o Fireworks para gerar a imagem.CONTEDO MULTIMDIAA Web atual rica em recursos de multimdia, como vdeos, udio, efeitos, etc., claro que tudo isso depende de diversos fatores, como principalmentevelocidade de conexo e boa distribuio do contedo no site.O Dreamweaver permite inserir de forma fcil em suas pginas HTML contedomultimdia, tornando assim seu site mais rico e interativo.Insero de Animaes Flash (SWF)Atualmente quando se pensa em animao para pginas WEB, j se pensa emtecnologia Flash, isso com razo, segundo a Adobe 98% dos computadorescom acesso a internet, possuem alguma verso do plug-in do flash instalados, 30 31. e caso o computador no possua, ao acessar uma pgina que contenha aanimao em Flash ele automaticamente baixa o mesmo e solicita umaautorizao para a instalao do mesmo.Para se inserir uma arquivo SWF (aplicao criada no flash e publicada,cuidado, no correto e nem possvel de visualizao colocar o FLA, que umarquivo de projeto), clique no menu Insert, Media Flash, ou clique sobre o botoinsert Flash na barra.. Dois conceitos atualmente muito debatidos eutilizados na web atualso usabilidade (http://pt.wikipedia.org/wiki/Usabilidade)eacessibilidade(http://pt.wikipedia.org/wiki/Acessibilidade), e o flash sempre foi consideradoum vilo em relao a esses assuntos, mas na ltima verso a Adobe jtrabalhou e melhorou o flash em relao a isso. Ento ao inserir sua animaoem flash no Dreamweaver ele apresentar uma tela onde voc pode adicionaralguns elementos de acessibilidade como um Title, teclas de acesso e ordemde tabulao do swf em sua pgina.Na janela que se abre, localize seu arquivo SWF e insira-o na pgina. Observeque ele vai aparecer em sua pgina como um retngulo cinza com o smbolodo flash. A barra de propriedades agora se modifica para configurao doSWF.Pela barra podemos configurar a dimenso do SWF, se ele ficar em looping ese iniciar automaticamente, o espaamento vertical e horizontal, a qualidade,31 32. a forma de escala (Scale), quando seu filme possuir elementos que fiquem forado palco do Flash e interajam com o filme em tempo de animao, coloque NoBorder. O alinhamento do flash em relao ao local onde est inserido, cor defundo para o filme.Para poder visualizar o filme dentro do Dreamweaver, basta clicar no botoPlay.A opo Parameters permite que voc adicione parmetros ao seu filme. Umdos parmetros mais utilizados quando se utiliza banners flutuantes, quemuitas vezes se torna necessrio que o fundo de seu filme fique transparenteonde no existe animao. Ai utiliza-se o parmetro wmode com valortransparent.Flash VdeoUm dos grande recursos criado ultimamente para disponibilizao de vdeos naWEB foi o formato FLV (Flash Vdeo), pois permite a publicao de vdeo emweb sites, sem a necessidade de um servidor de Streaming, plug-ins, etc...,basta apenas que o navegador do usurio tenha o plug-in do Flash instalado(98 % dos computadores o tem), o maior cone de sucesso do Flash vdeo aoo site YOUTUBE(www.youtube.com), que atualmente sinnimo de vdeo naInternet.Para se inserir um arquivo FLV em HTML com o Dreamweaver muito fcil.Clique no painel CommonFLV, ou no Menu Insert, Media, Flash Vdeo. 32 33. Na tela apresentada, necessrio definir o caminho onde est o seu arquivoFLV, o Skin de controle do vdeo, as dimenses (Use o boto Detect Size), asopes Auto play (inicia automaticamente) e Auto Rewind (reiniciaautomaticamente) so opcionais, e a ltima tela uma mensagem a sermostrada caso o usurio no tenha o plug-in do flash.33 34. HYPERLINKSO principal elemento que fez com a Internet crescesse como est atualmente o fato de que podemos rapidamente mudar de contedo atravs de simplesclique de mouse, os chamados Hyperlinks.Podemos criar links para todos os tipos de arquivos existentes, mas somentealguns podem ser abertos nos navegadores, os demais, sero salvos nocomputador do usurio.Links Absolutos e RelativosAntes de comear a colocar os links em suas pginas da WEB, voc deve estarciente dos diferentes tipos de nomes de caminho que voc pode utilizar paravincular a outro documento na Internet.Os nomes de caminho absolutosApontam para uma localizao na Internet fora do site no qual a pgina atualest localizada. No nome de caminho http://www.adobe.com.br/index.html odocumento index.html est localizado dentro da raiz do site.Os nomes de caminhos relativosApontam para links dentro do mesmo site, por exemplo, no site atualhttp://www.seusite.com.br/ precisofazer um linkpara o arquivoimagens.html, ento por estar no mesmo diretrio somente ligo ao nome doarquivo, j se preciso linkar para uma imagem localizada na pasta imagem,fao da seguinte forma imagem/figura.gif que o link vai procurar dentro dapasta imagem o arquivo figura.gif.Em servidores Windows no existe a diferenciao entre maiscula eminsculas no nome e extenso dos arquivos, nem sobre acentuao eespaos.Mas na internet, a grande maioria de servidores operam com o SistemaOperacional LINUX que baseado na UNIX, ento sempre procure utilizar nosnomes dos arquivos de seu site, letras minsculas, sem acentuao e semespaos, pois se voc colocar letra maiscula no nome de um arquivo e fizer olink com letra minscula o arquivo no ser encontrado.34 35. Criando LinksCrie um texto e o selecione e observe que na barra de barra de propriedadesele lhe d opo de criar um link, crie o link para este texto. Se voc no sabeo nome correto de seu link, clique na pasta amarela direita da caixa de link.Defina o arquivo ao qual ser ligado e no menu pop onde voc pode especificarse que o link relativo pgina, ou site Root para fazer o link relativo a umalocalizao central em seu site da WEB.Podemos tambm para criar um link arrastar point to file diretamente at oarquivo a ser linkado.Observe que abaixo do campo link temos um campo chamado Target (alvo),quando o campo fica vazio, ao se clicar sobre o link no navegador, ele abre napgina atual do link sobrepondo-a. Se eu precisar que o link abra em uma novajanela, basta eu especificar nesse campo a opo _blank. As demais opesso:35 36. _parentCarrega o link no frame de nvel superior ao atual_self Carrega o link na mesma janela ou frame_topRemove todos os frames e carrega o link em uma janela inteira.Crie outro texto e aplique um link nele com a opo de abrir em uma novajanela.Um item muito importante quando se faz links para um endereoabsoluto como no exemplo sempre colocar o protocolo a serutilizado, ou seja, sempre colocar http://www.apostilando.com.ncorasPermite criar links internos na mesma pgina, facilitando assim a navegaoem documentos longos.Criando a ncoraPrimeiro defina os links que vo chamar a ncora dentro de sua pgina.Depois atribua a um texto, figura ou espao em branco a sua ncora, atravsdo Menu Insert Named Anchor.junto ao local onde a ncora ser criada aparecer uma marca .Chamando o link da ncoraPara criar agora o link para esta ncora na caixa de links digite#nomedancora. Se a ncora estiver em outro documento coloquedocumento.htm/#nomedaancora. 36 37. Links para e-mailPodemos tambm atribuir link para e-mail, atravs de textos ou imagens, o quemuda a forma de chamada, para se criar o link para um e-mail, deve-se usarmailto:[email protected]. Essa forma de link para e-mail tem um problema que ao ser clicado no link ele vai abrir o programa de e-mail padro (Outlook Express, Outlook, etc...), e muitos usurios no utilizam programas de e-mail,acessam o e-mail atravs dos prprios webmails (hotmail.com, gmail.com,yahoo.com), ento nesses casos aconselhvel ao se criar o link colocar o e-mail para onde ser apontado o link.TABELASA funcionalidade da tabela foi adicionada a HTML para simplificar aapresentao de dados tabulares, como relatrios cientficos.Para criar uma tabela muito importante que a mesma seja planejada erascunha antes para depois minimizar o seu trabalho.Para inserir uma tabela clique no boto Insert Table, ou no boto de inserode tabela no painel direita, ela est disponvel na aba Common e Layout. 37 38. Defina nmero de linhas e colunas desejadas, se quer borda e qual ser a suaespessura, defina a largura de sua tabela em relao largura da tabela (emPixels ou em porcentagem), o espaamento entre as clulas e o espaamentoentre a clula e o seu contedo (Cell padding e Cell Spacing). 38 39. Na painel na opo Layout podemos alterar as propriedades de nossa tabela.Podemos tambm alterar o alinhamento da tabela, a cor de fundo da tabela,cor de borda e imagem de fundo da tabela.Se voc clicar com o boto direito de seu mouse em qualquer clula de suatabela, ele habilita tambm as opes de manipulao de nossa tabela.39 40. Para podermos selecionar as clulas (TD), linhas (TR) ou toda nossa tabela(Table), podemos usar o rodap do Dreamweaver.ClulasAo clicar em uma clula, ou selecionar mais de uma clula, a barra depropriedades muda para a formatao de texto e abaixo as propriedadesreferentes s clulas.As possibilidades de alterao das clulas so a opo de mesclar duas oumais clulas (na imagem o boto est inativo por termos apenas uma clulaselecionada), ao lado do boto mesclar temos o boto dividir clulas, ao clicar40 41. sobre ele podemos dividir em colunas ou linhas.Ao lado temos as opes de definir as dimenses da clula largura (W width)e altura (H height), as dimenses podem ser aplicadas em pixels ou emporcentagem, sendo que em pixels.A opo No wrap tem como objetivo impedir que o contedo quebre para alinha de baixo da clula ao alcanar a largura da clula.A opo Header permite atribuir clula a propriedade de clula de cabealho(ttulo), acrescenta um negrito e um peso maior fonte.Podemos tambm acrescentar cor de fundo e de borda a nossa tabela, bemcomo imagem de fundo.Tabela normal41 42. Tabela ModificadaFOLHAS DE ESTILOO CSS (Cascading Style Sheet) ou folhas de estilo em cascata o recursocoreto de formatao de elementos dentro de seu documento HTML, seguindoos padres de internet atuais recomendados deve-se sempre utilizar a CSSpara formatao e posicionamento de TAGS HTML.Em nosso primeiro exemplo ao configurarmos nossa pgina com margens,definio de cores e texto para textos e links, e por trabalharmos com XHTML,todas essas formataes so atribudas em cdigo de CSS.42 43. No topo das paletas direita temos o painel CSS Styles.Para se trabalhar com as folhas de estilo necessrio algum conhecimento deHTML, pois ela baseia-se na formatao das TAGS HTML e suas funes.Podemos alterar as propriedades de uma tag existente, como podemos criarclasses e identificadores para as TAGS onde podemos ter dentro de uma folhade estilo TAGS de tabelas com duas ou mais formataes.Criando uma folha de estilo baseada em uma TAG existente.Para criar uma folha de estilo simples clique no painel CSS clique no botoNew CSS Style . 43 44. Escolha a opo Tag (redefines na HTML element), automaticamente elemostra o H1 que relativo ao ttulo de nvel 1. A opo Rule Definition:permite definir a formatao em um arquivo de folha de estilos, ou somente nodocumento atual.Ao clicar em OK ele abre a janela onde podemos definir a forma que ter anossa TAG H1.A opo Type, permite alterar as configuraes de fonte da TAG Selecionada.Na opo Background podemos definir as configuraes de plano de fundo daclula.Em Block, podemos definir as configuraes de pargrafos do texto, comoespaamento entre palavras, alinhamentos, etc...A opo Box permite criar um bloco de nossa TAG definindo largura e altura,etc...Em Border, podemos definir o tipo de borda a aplicar em nossa TAG.List permite alterar as configuraes de nossa lista de marcadoresPositioning permite trabalhar com posicionamento da TAG selecionada emrelao ao Documento.Extensions: Permite definir quebras de pgina, cursor do mouse, e filtros a44 45. serem aplicados ao seu web site.O cdigo HTMLEditando uma folha de EstilosPara alterar algo em sua folha de estilo, clique no boto Edit Style Sheet,ser perguntado, qual o estilo existente que voc quer alterar.Criando uma classeAs classes permitem que se crie uma formatao especial que possa seradicionada dentro de outras TAGS, por exemplo, preciso formatar as clulas deuma tabela com duas cores diferentes, posso criar duas classes e aplicardentro delas, apelas clicando na tabela e depois clicando nas classes no painelde estilos, conforme fizemos no inicio do mdulo de Dreamweaver para aformatao de fonte.A formatao da Classe igual formatao de uma TAG HTML, a diferena que necessrio atribuir a classe a TAG.Depois de criar a classe, selecione o elemento que vai receber a classe eaplique ela ao contedo selecionado pela barra de propriedades.Em algumas situaes ser necessrio aplicar o estilo em Tags no 45 46. selecionveis pelo modo visual do Dreamweaver, nesses casos necessrioaplicar o estilo pelo modo de cdigo, basta apenas aps o nome da TAG digitar< TAG class= nomedaclasse >O modo de aplicao de CSS que vimos at o momento est diretamenteaplicado no documento.Caso tenhamos formataes de CSS que sejam aplicadas a diversosdocumentos, podemos gerar um documento com a extenso CSS e criar umlink em cada documento para esse arquivo, isso alm de padronizar seu site,far com qualquer alterao de formatao, afetar em todos os documentos.Para utilizar a formatao de CSS atravs de um arquivo externo, crie um novodocumento, e escolha a opo CSS.Coloque a formatao desejada de seu CSS nesse documento.Para linkar ao arquivo CSS criado ao documento existente clique no botoAttach Style Sheet .46 47. Basta agora todas as formataes a serem feitas no arquivo CSS, seroaplicadas a todos os documentos ligados ao arquivo css.Conforme j dito nessa apostila o conhecimento bsico da linguagemHTML realmente necessrio para poder aproveitar todo os recursosque o Dreamweaver fornece ao usurio. A formatao CSS umgrande recurso de formatao de seu HTML e uma das formas de vocdeixar seu site dentro de norma pela W3C(www.w3c.org).CAMADAS E POSICIONAMENTOAs camadas fazem parte do mundo das folhas de estilo em cascata e daDynamic HTML. Uma camada um recipiente para contedo de HTML,normalmente definido pelas TAGS

ou , que voc podeposicionar em qualquer lugar em uma pgina.As camadas so denominadas camadas, porque podem ser posicionadas emtrs dimenses. Voc pode configurar uma localizao absoluta ou relativapara uma camada ao longo dos eixos x e y da pgina. A terceira dimenso denominada ndice Z e permite que as camadas se sobreponham.Os designers realmente adoram as camadas por sua versatilidade: voc podeocultar as camadas (por visibilidade) ou at partes das camadas (com o ndiceZ ou com o recorte de reas) quando uma pgina inicialmente carrega. Ento,voc pode escrever um script que far com que as reas ocultas apareamdepois que certa quantidade de tempo ou quando certo evento de usurioacontece. 47 48. Posicionamento CSSVoc pode aplicar posicionamento de CSS para um bloco de texto, umelemento do tipo bloco, uma imagem ou uma camada. H duas maneiras deaplicar posicionamento: uma criar uma classe de estilo e aplic-la sselees ou blocos de texto que voc quer posicionar na pgina. A outra criaruma camada na janela de documentoque voc pode modificarindependentemente de criar um estilo.Posicionamento absoluto versus relativoA posio de um elemento de HTML pode ser absoluta, relativa ou esttica.O posicionamento normal chamado esttico e faz com que o elemento sejaposicionado dentro do fluxo normal do texto.O posicionamento relativo significa que a posio de uma camada ou outroelemento definida em relao ao canto superior esquerdo do recipiente pai.Entretanto, o elemento relativo est includo no fluxo da pgina e tambm embutido ele no causa quebras de linha automticas.Para garantir as propriedades inline, uma tag deve ser utilizada emvez de uma tag
.Criando CamadasPara poder criar uma camada voc deve deixar seu painel em Layout e deveusar um dos dois elementos de criao de camadas.48 49. As propriedades de nossa Layer. Da caixa de propriedades so o nome dalayer. A propriedade Overflow como a Layer vai se comportar no documento,o padro visvel, mas podemos definir ela como Hidden (escondida), existeesse recurso, pois podemos atravs de scripts deixar ela visvel em atravs debotes, textos e imagens. Scroll (com barras de rolagem), que manter barras 49 50. de rolagem em sua layer, isso permite que ela tenha um tamanho menor que oseu contedo. Auto que mostrar as barras de rolagem somente quando foremnecessrias.A opo Left(L) e Top(T) so relativas ao posicionamento da Layer,observando que os pontos 0,0 (L, T) ficam no canto superior da pgina.As dimenses de nossa Layer W (width) e H (height) so representadassempre em pixels.Z-index relativo ao empilhamento de nossas camadas, isso permite quepossamos colocar uma layer sobre a outra, a camada de Z-index maior sempreficar acima da outra. Um detalhe importante, animaes em SWF sempreficaro acima da layers independente do Z-index, sendo necessrio o uso doparmetro de Transparncia (conforme visto no captulo de Multimdia).Vis, referente visibilidade da camada.A opo BG Image permite definir uma imagem de fundo da Layer e a opoBG Color, permite colocar uma cor de fundo na Layer.A opo Clip permite recortar nossa LayerNo painel camadas possvel marcar a opo Prevent Overlaps, isso farcom no seja possvel sobrepor s camadas.Escolhendo as TAGSH duas tags utilizadas na criao de camadas, as tags
e . A 50 51. tag
utilizada posicionamento absoluto, uma quebra de pargrafo cerca atag
. Se preferir criar uma camada embutida sem quebras de pargrafoutilize a tag .Uma das principais vantagens das camadas que se pode posicion-las earrast-las para qualquer posio de sua pgina, basta apenas clicar sobre oquadradinho no topo e arrast-la ou alterar as propriedades Esquerda e Alto nabarra de propriedades.Para redimensionar as camadaspode-seutilizar as alasderedimensionamento ou atravs da largura e altura na caixa de propriedades.Aninhando e Sobrepondo Camadas.Aninhando CamadasA coisa mais interessante sobre as camadas que voc pode colocar umacamada entro de outra ou pode criar duas camadas que se sobrepem.Para sobrepor duas ou mais camadas, somente mover uma sobre a outra.Para aninhar uma camada dentro de uma camada, basta criar a primeiracamada e depois criar a segunda camada dentro da primeira.No painel Camadas voc tem as camadas sendo mostradas, clique sobre asegunda camada criada e arraste-a sobre a primeira camada com a tecla CTRLpressionada e observe que a camada fica como uma subdiviso da primeira.Criando Frames Embutidos (IFRAME)Existe uma TAG chamada para fazer os frames aparecerem dentrode uma pgina.Para poder introduzi-la proceda da seguinte maneira abra o visualizador de cdigo do HTML e insira a seguinte TAG . As propriedades do IFRAME so as mesmas do FRAME.Podemos tambm acrescentar IFRAME, pelo painel Insert, Layout. 51 52. Ao clicar no boto ele divide muda para visualizao SPLITNesse caso, voc precisa adicionar as informaes diretamente no cdigo, ouento selecione o cdigo IFRAME e clique no menu Modify, Edit TAG.52 53. Em Source, devemos colocar qual ser a pgina a ser aberta no IFRAME, emName, deve-se colocar um nome para o IFRAME ( imprescindvel opreenchimento desse campo, caso que faa link para abrir outras pginasdentro do IFRAME).Width e Height para definir a largura e altura do IFRAME.Margin width e Margin Height para definir as margens de IFRAME e docontedo interno e externo dele.Alignment, forma de alinhamento do contedo dentro do IFRAMEScrolling, definio de como sero apresentadas s barras de rolagem (Aopo Auto apresentar as barras de rolagem somente quando necessrias).Show Borders, permitir ter ou no bordas em seu IFRAME.FORMULRIOSO Dreamweaver possui todos os recursos para a criao de um formulrio,inclusive para formulrios dinmicos que atribuam envios para pginasdinmicas como ASP, PHP, JSP, CFM.Os elementos de um FormulrioPara inserir um formulrio no Dreamweaver clique no Menu Insert Form, ou 53 54. atravs do painel Insert, aba Forms.Ser acrescentado ao seu documento rea de seu formulrio, essa rea representada com uma linha pontilhada de vermelho.Na barra de propriedades deve-se definir qual ser o nome do formulrio aforma de envio. A forma de envio pode ser para um arquivo dinmico (ASP,PHP, etc...) que vai tratar os dados postados no formulrio e enviar para umbanco de dados ou direcionar para um e-mail, ou diretamente para um e-mail. necessrio tambm definir o Mtodo a ser utilizado POST ou GET.Tipos de campos de formulrioPara inserir os objetos do formulrio, clique no Menu Insert Form Objects, ouclicar nos botes correspondentes na Aba de formulrio. importante sempre verificar se os campos esto sendo colocados dentro doretngulo pontilhado que a rea de nosso formulrio.Caixas de Texto: Permitem que se entre com textos e nmeros. Pode serde linha simples, multilinha Chamados de caixas de comentrios, e senhaonde ele mascara tudo o que for digitado com sinais de (*) asteriscos.54 55. Ao acrescentar um campo de texto necessrio preencher alguns campos depropriedades. Devemos dar um nome ao nosso campo de texto, definir onumero de caracteres visveis (Char width), isso implicar no tamanho docampo do formulrio. Max Chars define um nmero mximo de caracteres quepoder ser preenchido no campo.Caixas de Seleo: So as caixas de checagem que permitem que seselecione vrios para preferncias do visitante e podem ter o seu estado inicialselecionado ou no.Ao se criar um grupo de opes de marcao as opes devero semprepertencer ao mesmo grupo.Boto de Opo: Permitem que o usurio faa apenas a seleo de umobjeto entre vrias opes possveis e tambm podem ter o seu estado inicialselecionado ou no.Ao se criar um grupo de opes de marcao as opes devero semprepertencer ao mesmo grupo.Menu de Lista: Permitem que se criem menus de listagem para escolha dousurio.Ao criar o menu de lista na barra de propriedades necessrio clicar no botoLista Values e preencher o Label (nome que vai aparecer ao usurio) e valor docampo ao ser selecionado.O padro do campo ser uma lista, mas podemos definir ele tambm como 55 56. uma lista. Ao campo ser definido como uma lista podemos definir quantaslinhas sero visveis e se ser possvel selecionar mais de um item na lista(basta marcar o campo Selections Allow multiple).Botes : Permitem que se crie botes de ao de enviar (Action SubmitForm), e limpar campos (Action Reset Form), ou para eventos atravs delinguagens de scripts (None).Crie um layout de formulrio conforme a seguir.No campo Nome coloque o textfield como nome.Para o campo e-mail preencha email e para o campo comentrios coloquecomentrios. 56 57. Voc pode observar que no mtodo de envio de nosso formulrio o mesmoenvia os dados para um documento chamado env_contato.php. Caso vocno tenha preenchido esse campo, basta apenas clicar na tag norodap do Dreamweaver.Esse arquivo env_contato.php, ser o arquivo que vai receber os dadospostados no formulrio. O cdigo que vamos criar ser na linguagem PHP.Crie o seu arquivo env_contato.php, o visualize pelo modo COD e acrescenteo seguinte cdigo onde ficar a sua resposta. 57 58. COMPORTAMENTOSAs ferramentas de comportamento do Dreamweaver permite que voc apliqueas aes comuns de JavaScript sem escrever nenhum JavaScript.Voc pode fazer algo acontecer em uma pgina quando seus usurioscarregam uma pgina, clicam em um objeto ou movem o mouse pela tela.Logicamente que o Dreamweaver possui as rotinas mais comuns de javascript,pois o JavaScript uma linguagem de scripts Orientada a Objetos e a suaestrutura e construo depende do seu conhecimento em relao linguagemAdicionando ComportamentosAdicionar um comportamento a uma pgina incrivelmente simples ocomplicado so os detalhes. Todos os comportamentos do Dreamweaver soadicionados e editados com o inspetor Behaviors.Para adicionar um comportamento a sua figura basta apenas clicar sobre osinal de (+) na esquerda superior do Painel. 58 59. Pop-upsImporte uma imagem qualquer e clique sobre ela, depois chame as opes decomportamentos e escolha Open Browser Window (Abrir uma janela denavegador), esta uma das opes mais comuns pelo fato de as janelas Pop-Up serem muito utilizadas para propaganda em WebSites.Ao terminar coloque Ok e observe o painel behaviors. Observe que ele mostraa ao e o evento que far com que a ao. Verifique se est como onClick, seestiver com outro evento, mude para onClick59 60. Ocultar Mostrar camadasAtualmente muitos usurios utilizam bloqueadores de janelas pop-up, emboraseja possvel configurar e at mesmo autorizar abertura de janela pop-up, amaioria dos usurios de Internet simplesmente a ignoram. Um dos recursosque tem crescido ultimamente so os chamados banners flutuantes que soLayers com a publicidade que antes eram utilizadas dentro das janelas pop-up, necessrio apenas criar dentro dessa janela a possibilidade de se fechar aLayer (assim ela vai aparecer para o usurio, mas na realidade ela ficaroculta).Para criar seu banner flutuante, proceda da seguinte forma:1 Crie uma layer, de um nome a ela e coloque dentro dela o contedo a sermostrado. aconselhvel nomear a sua layer60 61. 2 possvel definir textos, imagens e mapas de imagens para chamarem ocomportamento que permitir fechar a janela. No caso da imagem acima foidefinido um texto fechar.3 Selecione o texto e no painel Behaviors, clique na opo Show / HideLayers.4Na janela aberta vai aparecer sobre as layers existentes em seudocumento, selecione a Layer a ser fechada e clique no boto Hide.61 62. 5 Na paleta Behaviors ele vai mostrar o comportamento criado, necessriomudar o comportamento para fechar a Layer. Coloque como opo onClick,pois somente ao ser clicado no texto que ser fechada a Layer.Manter a opo de evento do mouse para chamar um POP-UP , oupara fechar uma layer, embora funcione de forma correta, possui umpequeno problema, ele desabilita o cursor de link do navegador (mozinha),podemos corrigir isso chamando o comportamento como um link, lembrandoque o comportamento uma funo Javascript.Visualize seu documento em SPLIT.Observe que no cdigo aparece o cdigo de fechamento da Layer:onclick="MM_showHideLayers(imagem,,hide)".Copie: MM_showHideLayers(imagem,,hide)Ainda com o texto selecionado, clique na caixa de link e digite:javascript: MM_showHideLayers(imagem,,hide)Depois apague o cdigo onclick. Sua linha de cdigo dever ficar: 62 63. Validando FormulriosUm dos recursos importantes hoje para a comunicao entre o visitante de umsite a possibilidade de ele fazer contato com o responsvel pelo site. Amelhor forma desse contato atravs de um formulrio. E para certificarmosque os dados sejam enviados ao destinatrio, podemos validar nossoformulrio.Abra nosso formulrio:Nosso objetivo fazer com que esses campos no possam ser enviados embranco e que o campo e-mail precise de um e-mail vlido (no impede de serenviado algo como [email protected] .Clique dentro da rea de seu formulrio e na paleta Behaviors, clique na opovalidate Form, ser aberta a janela onde vo aparecer os campos de nossoformulrio. 63 64. Observe que ele mostra o tipo de campo text, o nome do campoPara o campo nome, basta apenas clicar sobre ele e marcar a opoRequired, isso far com o campo seja obrigatrio.Para o campo e-mail, marque a opo Required e marque tambm o radiobutton Email address, isso far com ele aceite apenas endereos de e-mail.Para o campo assunto, marque apenas Required.Teste seu formulrio e faa o envio sem preencher os campos. Observe queele mostra as mensagens, mas com os textos em ingls.Vamos arrumar nossos textos para que fiquem em portugus. Nas opes devisualizao do Dreamweaver clique na opo CODEVoc pode observar que o Dreamweaver faz todo o trabalho de cdigo paravoc.Vamos ento modificar os textos de respostas para nosso idioma.Localize a linhamude para digite um endereo 64 65. de e-mail vlido.Localize a linha mude para requerido ou campo(s)obrigatrio(s).Localize agorae mudeparaForamencontrados os seguintes erros.Salve e teste novamente seu formulrio.ABA SPRY DREAMWEAVEREmbora tenha sido lanado na verso CS3 do Dreamweaver as ferramentasSpry ainda so pouco utilizadas. O objetivo apresentar a voc como tirarproveito destas ferramentas.O framework Spry so bibliotecas no formato JavaScript e CSS, as quaispermitem aos usurios do Dreamweaver desenvolver interfaces mais ricas edinmicas. Alm de possibilitar a exibio de dados no formato XML e criarelementos interativos em pginas que exibem contedo dinmico sem anecessidade de tais pginas se carregarem por completo.O Dreamweaver disponibiliza o Spry em duas perspectivas, uma paradesigners e outra para programadores. Os designers podero criar efeitosvisuais como Appear, Fade, Blinds (Up e Down), Grow, Shake, Slide, entrevrios outros. J os programadores tero facilidades ao trabalhar com o Ajax ena exibio de dados armazenados em arquivos XML. Alm desses recursos,tantos para designers quanto para programadores, o Spry oferece algunswidgets que auxiliam na validao de formulrios.Vamos analisar a interface do Dreamweaver e localizar os recursos do Spry.Ele possui um painel chamado Spry.65 66. No painel DATANo painel Forms66 67. No painel Layout 67 68. Os demais recursos oferecidos pelo Spry so os efeitos, effects. Ambos estolocalizados na opo Effects do painel Behaviors.Quando voc seleciona algum recurso do spry no Documento window doDreamweaver, o Property inspector atualizado e exibe as configuraes derecurso em questo.O Spry so bibliotecas no formato JavaScript e CSS. O que significa dizer quepara cada recurso do Spry h um arquivo JavaScript e outro CSS relacionado.O arquivo JavaScript o responsvel pelo comportamento, interatividade,animao e o arquivo CSS se encarrega da estilizao.Quando voc utiliza algum recurso do Spry e posteriormente salva pgina emquesto, exibido o painel Copy Dependent Files, o qual copia para o seu site,configurado no Dreamweaver, os arquivos relacionados ao recurso utilizado.Alm de copiar os arquivos, ele lhe informa quais so os arquivos e exibe umalerta para lembrar-lhe de enviar os arquivos para o servidor na web.68 69. Spry MenuBarO primeiro componente Spry que vamos trabalhar o MenuBar. Pelo painelSpry clique no componente,ele perguntar se quer criar um vertical ouhorizontal.Escolha e clique em OK.69 70. Salve seu arquivo para que ele gere os demais arquivos necessrios.Pela barra de propriedades voc pode adicionar ou remover elementos de seucomponente, acrescentar links, etc.Ao salvar e testar, voc j poder ter idia de como ficar sua barra denavegao.Ao alterar as propriedades na barra ele muda as informaes no painel doDreamweaver. 70 71. Se precisar mudar alguma formatao de seu menu, ser necessrio que issoseja feito pelo painel de CSS.Por exemplo no modelo gerado pelo Dreamweaver, o fundo de cada elementono Over azul, caso queira que ele mude de cor para por exemplo vermelho,localize no arquivo CSS onde est esta propriedade e mude a cor. 71 72. Para verificar a mudana, necessrio utilizar o comando File/Save All paraque ele salve o arquivo CSS. Depois recarregue a pgina. 72 73. Spry AccordionO Spry Accordion, funciona da mesma forma que o componente Accordion quevimos no Flash, ele permite adicionar contedo em seu site em elementoscomo se fossem sanfonas.Crie um novo arquivo e clique no componente Accordion, ser solicitado que apgina seja salva. Salve-a e seu componente estar disponvel noDreamweaverO seu funcionamento semelhante ao visto no menuBar, posso adicionar ouremover contedo pela barra de propriedades. No campo Content de cada ABAdo Accordion, posso adicionar o contedo HTML.Spry Collapsible PanelFunciona de forma muito semelhante ao Accordion, ele usa uma ABA que ao 73 74. ser clicada mostra / oculta o contedo.Em uma nova pgina clique sobre o componente Collapsible PanelObserve pela barra de propriedades que podemos deix-la aberta ou fechada.Adicione seu contedo e salve seu arquivo.Ao testar, voc poder verificar que ao clicar sobre o ttulo da barra, ela irmostrar/ocultar o contedo.Spry Tabbed PanelsO Spry Tabbed Panels um grupo de painis organizados por abas, onde cadauma delas exibida por vez, ou seja, quando o contedo de uma aba exibido, os demais permanecem oculto. Esse tipo de recurso muito utilizadona exibio de extenso contedo em espaos compactos.Clique no componente Spry Tabbed Panels para inseri-lo em seu documento.74 75. Inicialmente ele cria duas TABS, mas seguindo a mesma lgica do que vimosacima, voc pode adicionar e inserir quantas ABAS forem necessrias. Apropriedades Default panel permite que se defina qual a ABA a ser aberta aocarregar a pgina.Vamos criar um Spry com sees como : Notcias, Esportes, Tecnologia eEntretenimento.Vamos tematizar nossas Abas com a cor Branca de fundo e adicionar uma corde contorno somente em baixo para cada uma das sees.A classe CSS que define as propriedades de cada uma das Abas TabbedPanelsTab.Encontre este bloco CSS no cdigo de suas pginas e duplique criando umpara cada ABA e mude a cor de contorno de baixo. necessrio tambm mudar a chamada da classe de cada uma doselementos:75 76.
  • Notcias
  • Esportes
  • Tecnologia
  • EntretenimentoAdicione contedo a suas AbasSpry TooltipO Tooltip, ou seja a dica/complemento que apresentado numa janela queaparece ao se passar o mouse sobre um elemento da pgina (chamaremoseste de gatilho), uma ferramenta muito til em qualquer projeto dewebdesign, e necessria em alguns. Est se tornando cada vez mais comumencontrarmos estas janelinhas flutuantes que servem como apndice parafacilitar a navegao.Crie um novo Arquivo e salve-o, depois insira o componente Tooltip.76 77. O texto que est na are em branco o texto que ser a chamada de seuTooltip e o que est na DIV amarela ser o mostrado ao passar o mouse.Na barra de propriedades podemos definir se o tooltip seguir o mouse, se eleficar oculto ao retirar o mouse e o efeito que ele ter ao aparecer e sumir.Spry Validao de FormulrioNo curso WebKit 01, vimos como validar um formulrio no Dreamweaveratravs de comportamentos Javascript (Behaviors), agora vamos aprendercomo fazer o processo utilizando alguns componentes Spry.Monte o formulrio conforme abaixo:Vamos utilizar os botes de validao da Aba Spry77 78. Vamos trabalhar com 2 tipos que so os textbox e o textarea.Coloque o cursor dentro da tabela ao lado do nome para incluir um text fieldclicando na primeira opo da rea marcada na imagem acima e ao abrir umajanela clique apenas em OK.Aps isso teremos o seguinte resultado mostrado na imagem abaixo.Vamos fazer o mesmo passo para e-mail e assunto, e para a opo mensagemclicamos na ltima opo da barra de ferramentas marcadas na imagem maisacima, a opo textarea. Logo teremos o resultado abaixo.Antes de comear a validao vamos nomear os campos certinhos e definir otamanho que voc achar melhor. 78 79. Clique no campo nome e a opo azul vai aparecer, clique na opo azul que abarra de propriedades ir mostrar as opo de validao para tipo de campo.Repare que est definido com Required para os campos. Abaixo de Previewstates temos a ao na qual queremos que seja feita a validao, normalmentedeixo no submit mesmo. Para a opo Type temos as seguintes opes:Agora s escolher a melhor opo para cada campo atendendo as suasnecessidades. A opo Type nesse artigo eu s vou usar para o campo email.Mas para o campo nome vamos colocar Min Chars = 3 e Max Chars = 200.Se for reparar assim que colocar Min Chars = 3 o para o campo nome a opoem vermelho com a mensagem em ingls, edite ela, repita para o mximo.79 80. Faa o mesmo processo para o campo assunto e para o campo e-mail, porempara o campo e-mail no se esquea de selecionar o Type (Email Address)dele para e-mail.Para o Text Area alm de definirmos o nmero min e max de caracteres aindapodemos marcar as opes: Char Count: A medida que vai digitando vai mostrando um contador de caracteres ao lado. Chars remaining: Aps definirmos o nmero mximo de caracteres essa opo habilitada e a contagem ser decrescente at voc poder marcar o block extra characteres.80 81. Salve e teste seu formulrio.Ao tentar enviar seu formulrio em Branco, ele avisar que necessriopreencher os campos.Vamos corrigir as mensagens em ingls. Visualize no modo cdigo.Selecione o texto value is required e chame o comando de substituir (MenuEdit, Find And Replace. Preencha o texto em Replace, depois clique no botoReplace All.81 82. Salve e teste novamente. 82 83. CONCLUSOComo pode ser visto nas pginas anteriores o Adobe Dreamweaver um dosmais complexos e fascinantes programas do mercado de Web design,logicamente que no foi possvel explorar todas as ferramentas e opesexistente em um programa to completo como esse, mas com certeza foiexplorado e explicado as mais importantes ferramentas e modos de trabalharcom este fascinante programa.Como auxilio em seu aprendizado, procure sempre consultar o HELP (tecla deatalho F1) do programa.Procure tambm sempre atualizar seu programa com os UPDATES fornecidospelo site oficial do fabricante www.adobe.com.br ou www.adobe.com.Bem como das novidades que esto fase de testes. http://labs.adobe.com/. 83