Curso Dreamweaver CS3

Curso iMasters Adobe Dreamweaver CS3
O Dia 27 de Maro de 2007 foi marcado pelo lanamento da Adobe Creative Suite 3. Entre os integrantes dessa novidade est a nova verso do Dreamweaver: o Adobe Dreamweaver CS3. E como no podia ser diferente, o iMasters traz, em parceria com Leandro Vieira e a TI SHOP, este curso voltado para o aprendizado das novidades presentes na verso Adobe Dreamweaver CS3. Esta verso do aplicativo est repleta de novos recursos e funcionalidades que veremos, em detalhes, no decorrer do curso. Faremos uma abordagem geral sobre o Dreamweaver e sua interface; o suporte completo a CSS e o Spry framework para Ajax integrado interface do Dreamweaver CS3. Como forma de demonstrar o potencial desses novos recursos, em todo o desenvolvimento desse curso (layout e navegao) foram utilizandas as novas funcionalidades presentes nesta verso do programa, tudo realizado de forma simples, rpida e fcil. Sendo mais especfico, o desenvolvimento foi realizado em duas partes: primeiramente criei um layout com duas colunas, lateral na esquerda e cabealho e rodap (2 column fixed, left sidebar, header and footer). Para isso, foram necessrios alguns cliques e pequenas modificaes no arquivo CSS referente ao layout, uma vez que precisei adequar o layout minha necessidade. E por ltimo projetei a navegao. Criei apenas um arquivo XML onde especifiquei os ttulos e os links de cada pgina. Isto me permitiu organizar, ordenar e pensar melhor a respeito sobre a posio de cada item do menu. Quando foi necessrio alguma alterao, ao invs de alterar todas as pginas do curso, eu editava somente o arquivo XML correspondente ao menu. Consegui essa facilidade, utilizando um recurso do Spry framework para Ajax, o Spry XML Data Set - responsvel por ler o arquivo XML e gerar os ttulos e links especificados no arquivo - e para finalizar utilizei o Spry Accordion para compor o visual e os efeitos do menu. Como visto, fiz questo que todos os recursos deste curso fossem desenvolvidos utilizando as novidades do Dreamweaver CS3 para que voc possa perceber, de forma prtica, um pouco das possibilidades de uso dos novos recuros desta verso do Dreamweaver.
1
Assim, espero que ao final do curso, os ensinamentos aqui presentes possam ser muito teis a voc no desenvolvimento de seus projetos e aprimoramento profissional. Nos encontraremos nas pginas seguintes que integram este curso, e no portal iMasters, onde estou sempre publicando novos artigos sobre Dreamweaver e Desenvolvimento Web em geral. Um forte abrao!
Introduo ao Dreamweaver CS3

A nova verso do Dreamweaver, a CS3, est recheada de novas funcionalidades que foram criadas para atenderem s novas exigncias dos programadores e designers para desenvolvimento web. No decorrer deste curso veremos as principais novidades da verso e nesta unidade faremos uma breve introduo a todas elas.
Ainterface
A estrutura da interface a mesma das verses anteriores do Dreamweaver, exceto por algumas modificaes que foram realizadas com o intuito de acomodar os novos recursos da verso CS3. Veremos no prximo captulo tais modificaes.
Spry
A grande novidade da verso CS3 o suporte do Dreamweaver metodologia Ajax atravs do framework Spry. Este composto por arquivos JavaScript e CSS que so utilizados no desenvolvimento de interfaces mais ricas e dinmicas, alm possibilitarem integrar dados no formato XML s pginas HTML. O Spry foi incorporado interface do Dreamweaver CS3 e disponibilizado em duas perspectivas: uma para designers e outra para programadores. Os profissionais de ambas as reas necessitam apenas de conhecimentos bsicos de HTML, CSS e JavaScript, uma vez que o trabalho rduo de configurao foi facilitado pela interface do Dreamweaver CS3.
MelhorianosuporteaCSS
O Dreamweaver CS3 valorizou o trabalho com layouts em CSS, alm de oferecer um melhor suporte a esse tipo de estilizao de pginas. Em sua atualizao para a verso atual, foi disponibilizada uma quantidade considervel de layouts CSS e cada um desses layouts vem com extensivos e completos comentrios a respeito de cada declarao CSS utilizada. O novo painel CSS Styles ficou super interessante, funcional e focado em importantes facilidades. Agora, poderemos mover as CSS de vrias maneiras, isto , mover as CSS inline para o head; mover do head para um arquivo CSS externo; mover entre um documento e outro; e muito mais. Atravs do CSS Advisor website poderemos encontrar solues para os bugs de navegadores especficos (em se tratando de CSS), sendo tais solues postadas pelos membros dessa comunidade. H dicas interessantes e importantes por l. Conhecer e, principalmente, compreender essas dvidas importante e evolui o conhecimento e experincia no desenvolvimento com CSS.
BrowserCompatibilityCheck(BCC)
Com essa ferramenta possvel verificar a compatibilidade da pgina entre os vrios navegadores e assim economizar tempo na realizao de testes de compatibilidade e renderizao. Com o Browser Capatibility Check voc poder ter a certeza que a visualizao da pgina ser consistente entre os mais populares navegadores e sistemas operacionais e o mais interessante que toda essa verificao feita na prpria interface do Dreamweaver.
XMLfcilesemesforo
No Dreamweaver CS3, integrar dados em arquivos XML super simples utilizando XSL ou o Spry XML Data Set. Uma vez configurados estes recursos no programa, possvel integrar os dados na pgina arrastando-os e soltando-os no local desejado. Sobre as demais novidades, poderemos confer-las nas unidades seguintes. At l.
3
Modificaes na Interface do Dreamweaver CS3

Nesta unidade faremos comparaes entre algumas partes da interface do Dreamweaver 8 e do CS3. A estrutura bsica de ambas interfaces praticamente a mesma. Porm, na verso CS3 podemos notar algumas melhorias e modificaes que foram realizadas com o intuito de acomodar os novos recursos desta verso. Vamos fazer um pequeno tour?
StartPage(Pginainicial)
A Star Page da verso 8 e da CS3 praticamente a mesma, exceto pela modificao no layout e na nova identidade visual desenvolvida para a CS3. Podemos observar as pequenas mudanas nas imagens abaixo:
Start Page do Dreamweaver 8
Start Page do Dreamweaver CS3
PainelNewDocument
O painel New Document (Ctrl + N) utilizado para criar novos documentos no Dreamweaver foi reestruturado e tambm est de visual novo. Vejamos as diferenas visuais entre as duas verses:
Painel New Document do Dreamweaver 8
Painel New Document do Dreamweaver CS3
Agora falaremos a respeito do novo painel New Document e os recuros que foram adicionados a ele.
Insertbar
A Insert bar contm botes organizados por categorias e so utilizados na criao e insero de elementos na pgina em questo, por exemplo: imagens, elementos de formulrios, tabelas, entre outros. Categorias adicionais so exibidas quando documentos que contm cdigos de servidor so abertos, por exemplo: documentos em PHP, Cold Fusion, entre outros. A grande diferena entre a Insert bar do Dreamweaver CS3 e a do Dreamweaver 8 foi a incluso dos recursos do Spry nas categorias Layout, Forms e Data. Alm da incluso de uma nova categoria, a Spry. As diferenas podem ser observadas nas imagens abaixo:
8
Insert bar do Dreamweaver 8
Insert bar do Dreamweaver CS3
PainelSiteDefinition
No painel Site Definition - utlizado na configurao de sites no Dreamweaver foi incluida a categoria Spry, a qual permite determinar uma pasta especfica para a incluso dos arquivos relacionados ao Spry, conforme podemos observar nas imagens abaixo:
Painel Site definition do Dreamweaver 8
Painel Site definition do Dreamweaver CS3
EdiodeimagensnoPropertyinspector
Na verso 8 do Dreamweaver, ao selecionar uma imagem no Document Window exibido no Property inspector uma cone do Firewoks que, ao ser clicado, abre o referido programa com a imagem aberta para a edio. Na verso CS3 o processo o mesmo, porm a diferena fica por conta do programa que aberto, que nesta verso o Photoshop. Observemos abaixo:
Property inspector do Dreamweaver 8 com uma imagem selecionada no Document window
10
Property inspector do Dreamweaver CS3 com uma imagem selecionada no Document window
Codingbar
A Coding bar - exibida somente no modo de visualizao Code View - no Dreamweaver CS3 ganhou o recurso "Move ou Convert CSS" - que veremos nas unidades seguintes. Aguarde!!! Enquanto isso, podemos observar nas imagens abaixo as diferenas entre a Coding bar da verso 8 e da verso CS3 do Dreamweaver.
Coding bar do Dreamweaver 8
Coding bar do Dreamweaver CS3
11
Como citado anteriormente, a estrutura da interface de ambas as verses praticamente a mesma, o que realmente mudou foi a incluso e organizao de alguns itens para acomodar os novos recursos inseridos na verso CS3.
Conhea o espao de trabalho do Dreamweaver CS3

Durante todo o curso falaremos vrias vezes sobre as partes que compe a interface do espao de trabalho do Dreamweaver. Conhecer cada parte que compe o ambiente de trabalho do Dreamweaver CS3 importante uma vez que trabalharemos durante todo o curso com essa interface. Assim, nesta unidade, faremos uma breve introduo a estas partes para que possamos nos familiarizar com as mesmas.
Espao de trabalho do Dreamweaver CS3 - Modo Designer
12
Insertbar
A Insert bar coloca nossa disposio vrios recursos que permitem inserir imagens, tabelas, formulrios, entre outros recursos em nossos documentos. Os mesmos recursos tambm esto disponveis atravs do menu Insert. Quando utilizamos alguma das opes da Insert bar o que ocorre na realidade a insero de fragmentos HTML com os atributos por voc informados atravs da interface de cada recurso.
Documenttoolbar
A Document toolbar armazena opes referentes ao documento que est aberto na interface do Dreamweaver, permitindo alternar entre os modos de visualizao do documento - Design View, Code View, Split View. Alm disso, exibe vrias outras opes como o ttulo do documento, visualizao da pgina no navegador de internet, entre outros.
Documentwindow
O Document window exibe o arquivo aberto na interface do Dreamweaver. nele que criaremos e editaremos nossas pginas.
Panelgroups
O Panel groups so vrios paineis agrupados e organizados sobre um tpico especfico. Eles podem ser expandidos clicando na "setinha" esquerda do nome de cada tpico do grupo. Para reorganizar a ordem em que os grupos so listados no Panel groups podemos clicar em um discreto cone esquerda da "setinha" e arrastar o painel para reorganiz-lo.
13
Tagselector
Na parte inferior do Document window, temos a tag selector, a qual exibe a hierarquia das tags que englobam o elemento selecionado. Clicando em qualquer tag listada na tag selector, o elemento ser selecionado no Document window juntamente com o seu contedo.
Propertyinspector
O Property inspector utilizado para visualizarmos ou alterarmos uma variedade de propriedades - atributos - do elemento selecionado no Document window e, para cada tipo de elemento, existem opes diferentes e so todas relativas a ele.
Filespanel
O Files panel utilizado para gerenciarmos os arquivos e pastas relativas ao projeto que estamos trabalhando, permitindo tambm acessar nossos arquivos locais, semelhante ao Windows Explorer.
Conhea o painel New Document do Dreamweaver CS3

O painel New Document do Dreamweaver CS3 foi totalmente reestruturado. Agora est de visual novo e com vrios recursos adicionais, como podemos observar na imagem abaixo:
14
Painel New Document do Dreamweaver CS3
O grande diferencial do referido painel o foco nos layouts CSS. So vrios modelos e tipos de layouts CSS que podem ser escolhidos, alm da opo de informar o local em que as declaraes CSS sero armazenadas. O procedimento para a criao de um documento continua sendo o mesmo, ou seja, escolhemos uma categoria, definimos o tipo da pgina na coluna Page Type e escolhemos como ser o layout na coluna Layout. No entanto, se desejarmos criar uma pgina sem nenhuma estrutura de layout, podemos escolher opo <none> somente. Nos captulos seguintes falaremos mais sobre os layouts CSS disponibilizados pelo Dreamweaver CS3. Na opo DocType informamos qual o tipo de DOCTYPE - uma tag utilizada para informar a verso do HTML usado na pgina - que ser utilizado. Na opo Layout CSS existem trs opes: Add to Head, Create New File e Link to Existing File.
15
Na primeira opo, as declaraes CSS referentes ao layout escolhido sero dispostas no cabealho da pgina a ser criada. Na segunda opo, Create New File, informamos um nome - o Dreamweaver sugere um nome relacionado ao nome do layout - ao arquivo CSS e o local em que ele ser salvo e nesse arquivo sero dispostas as declaraes CSS referentes ao layout escolhido. J na terceira opo, se escolhida, indica que usaremos um arquivo CSS existente. Para informar qual arquivo esse, necessrio usar o boto Attach Style Sheet. Vejamos a imagem abaixo:
Boto Attach Style Sheet no painel New Documento do Dreamweaver CS3
Uma vez clicado no boto, teremos o painel Attach External Style Sheet como demonstrado na imagem abaixo:
Painel Attach External Style Sheet

16
Nesse painel, na opo File/URL, selecionamos o arquivo CSS que ser utilizado. Em Add escolhemos como o arquivo ser aplicado na pgina, ou seja, se ele ser linkado ou importando e em Media definimos o tipo de mdia referente ao arquivo. Ao deixar esse campo em branco, utilizaremos Media padro que refere-se a tela de computadores. Uma vez informado o arquivo CSS que ser utilizado, o campo Attach CSS file ir list-lo. Nele teremos a opo de exclu-lo atravs do boto Delete the selected file from the list, como demonstrado na imagem abaixo:
Boto Delete file selected from the list no painel New Documento do Dreamweaver CS3
O processo de criao de configurao de um arquivo finalizado ao clicar no boto Create. Vejamos:
Boto Create no painel New Document do Dreamweaver CS3
Browser Compatibility Check (BCC)
17
O Browser Compatibility Check (BCC) nos ajudar a verificar se determinadas combinaes de marcao HTML e estilos CSS podem causar algum tipo de problema em determinado navegador. Testar pgina por pgina de um site em vrios navegadores de internet necessrio para verificar a compatibilidade da pgina entre eles, porm este um trabalho em que dispendemos muito tempo. Na verso CS3 do Dreamweaver, com o Browser Compatibility Check, poderemos realizar esse rduo trabalho de forma simples e prtica. Alm da economia de tempo, teremos certeza que a visualizao da pgina (renderizao) ser consistente entre os navegadores de internet e os sistemas operacionais. Por padro, o BCC verifica a pgina de acordo com os seguintes navegadores de internet:

Firefox 1.5; Internet Explorer 6.0 (Windows); Internet Explorer 5.2 (Macintosh); Netscape Navigator 8.0; Opera 8.0; Safaria 2.0
Para definir os navegadores desejados teremos que inform-los ao Dreamweaver, atravs do painel Results (F7 ou Windows -> Results) na aba Browser Compatibility Check, clicando na seta verde localizada no canto superior esquerda da referida aba, como podemos observar na imagem abaixo:
Seta verde localizada no canto superior esquerdo da aba BCC
Ao clicar na seta citada anteriormente, escolhemos a opo Settings... e em seguinda configuramos o painel Target Browsers selecionando a verso dos navegadores desejados. Vejamos a imagem abaixo:
18
Painel Target Browsers
Na opo Settings... da Check Page na Document toolbar possvel tambm acessar a opo demonstrada acima. Observemos a imagem abaixo:
Opo Settings... da Check Page na Document toolbar
Para que seja efetuada a validao da pgina desejada, escolhemos a opo Check Browser Compatibility da Check Page na Document toolbar ou a mesma opo no Painel Results. Podemos observar ambas as opes, respectivamente, abaixo:
19
Opo Check Browser Compatibility da Check Page na Document toolbar
Opo Check Browser Compatibility na aba BCC do painel Results
O resultado da validao exibido no painel Results na aba Browser Compatibility Check, como podemos ver no exemplo abaixo:
Resultado da validao do BCC no painel Results na aba BCC
20
Adobe CSS Advisor Beta

O Adobe CSS Advisor Beta uma comunidade pblica que foi desenvolvida com os seguintes propsitos:

Permitir que possamos procurar por solues sobre CSS e compatibilidade de navegadores de internet; Permitir que compartilhemos com toda a comunidade as solues e os artifcios que descobrirmos; Comentar e melhorar as solues j existentes;
Como freqentador, sugiro a voc que acompanhe sempre essa comunidade. Acesse CSS Advisor beta e conhea-a. Obs: At o momento em que escrevo esta pgina, h diversas solues e explicaes sobre bugs relacionados a propriedades CSS, como por exemplo: Background, Border, Position, Float, entre outras. Existem ainda solues relacionadas a navegadores de internet como Internet Explorer, Mozilla/Firefox, Opera e Safari. Faam um bom proveito.

21
Inteno dos Layouts CSS no Dreamweaver CS3

O Dreamweaver a cada verso lanada vem adotando sistematicamente os padres da web. O que justifica essa adoao por parte deste programa a quantidade cada vez maior de designers e desenvolvedores web que esto adotando tais padres. Um exemplo clssico dessa mudana a migrao de layouts baseadas em tabelas para layouts com Cascading Style Sheets (CSS). Dentre vrios benefcios, a utilizao da CSS faz com que o layout fique mais robusto, consistente e cross-browser. Entretanto, como so muitas as pessoas que no tem tempo para aprender todas as tcnicas que envolvem esses processos, a dificuldade para entregar um trabalho com tais caractersticas aumentam. Nesse ponto entram as modificaes da verso CS3 do Dreamweaver, as quais deixam nossa disposio diversos layouts CSS que so criados com a facilidade de um click com o mouse, sendo comentada extensivamente cada declarao CSS utilizada. As opes de layout so variadas: pginas com uma, duas ou trs colunas e cada uma delas com elementos adicionais, como por exemplo: cabealho (header), rodap (footer), entre outros. Como dito anteriormente, um dos benefcios do layout CSS sua consistncia e a sua caracterstica de ser cross-browser, o que significa que um layout, site, aplicao, recurso, entre outros, suportado por vrios navegadores de internet (browsers). Alm disso, os layouts CSS disponibilizados foram escritos com o cuidado de evitar a utilizao de hacks CSS para navegadores de internet especficos. Assim, os layouts CSS fornecidos pelo Dreamweaver CS3 so compatveis e renderizados para os seguintes navegadores de internet:

Firefox 1.0, 1.5 e 2.0 (Windows e Macintosh); Internet Explorer 5.5, 6.0 e 7.0 (Windows); Opera 8.0 e 9.0 (Windows e Macintosh); Safari 2.0 (Macintosh);
22
Tipos de Layouts CSS

Alm das opes de layouts com uma, duas ou trs colunas e cada um deles com elementos adicionais - cabealho (header), rodap (footer), entre outros - ainda podemos escolher o tipo de layout desejado. Os tipos disponveis so os seguintes:
Elastic layout (layout elstico) - Os valores de medida para o tamanho total do layout ou das colunas que o compe so especificados com unidades em (em). Dessa forma, o layout ser balanceado de acordo com o tamanho de fonte utilizada. Esse um recurso muito til e agradvel para usurios com problemas de viso, por exemplo. Uma vez que medida que o tamanho de fonte aumentado, as colunas ficam maiores e a leitura, conseqentemente, mais confortvel. Ao escolher essa opo, tenha em mente que esse layout dever permitir uma largura varivel. Fixed layout (layout fixo) - Os valores de medida para o tamanho total do layout ou das colunas que o compe, so especificados atravs de unidades em pixels (px). Para tal opo, o layout centralizado horizontalmente no navegador de internet do usurio. Liquid layout (layout lquido) - Os valores de medida para o tamanho total do layout ou das colunas que o compe, so especificados com unidades em percentagem (%). A percentagem calculada de acordo com o tamanho da janela do navegador de internet do usurio. Hybrid layout (layout hbrido) - Layouts hbridos so aqueles que combinam dois tipos de layouts: elstico e lquido. Desta forma, o valor de medida para o tamanho total do layout medido em percentagem, sendo 100%. Entretanto, o valor das colunas que compe o layout so definidas em unidades em (em). Absolutely Positioned layouts (Layouts posicionados absolutamente) - Este tipo de layout, como o prprio nome j diz, tem as colunas que o compe posicionadas absolutamente. Os demais layouts utilizam as colunas de forma flutuantes (float).
Compreendendo e utilizando os Layouts CSS do Dreamweaver CS3

Para compreendermos melhor como utilizar os layouts CSS disponibilizados pelo Dreamweaver CS3, vamos criar um layout que servir como exemplo para nossa compreenso. Primeiramente vamos criar um layout CSS com duas colunas, do tipo fixo (fixed) e com cabealho (header) e rodap (footer). Para isso, podemos faz-lo atravs do painel New Document acessado no menu File > New... ou Ctrl + N. Vamos observar na imagem abaixo o painel New Document configurado:
23
Painel New Document com o tipo de layout: 2 colunas, fixo, cabealho e rodap
Vamos observar que na opo Layout CSS, podemos escolher Add to Head para que as declaraes CSS fiquem dispostas no cabealho do pgina para facilitar a explicao. Uma vez criado o layout, vamos compreender alguns detalhes importantes: Se repararmos nas declaraes CSS criadas para o referido layout, podemos observar que todos os seletores so precedidos de uma classe, neste caso, denominada como .twoColFixLtHdr. Em todos os layouts a lgica ser a mesma, sendo assim, vamos entender a lgica aplicada ao nome da classe utilizada no layout: twoCol significa duas colunas; Fix refere-se ao tipo do layout, ou seja, Fixed (Fixo); Lt igual a Left, indicando que a coluna est na esquerda; Hdr so os opcionais do layout, Header e Footer. Simples n? Agora que j a conhecemos, podemos utiliz-la para tentar decifras as demais. Dessa forma, podemos nos perguntar: qual a finalidade dessa classe? Com essa classe precedendo os seletores, poderemos combinar layouts e, ao mesmo tempo, escrever um CSS mais eficiente. Tal classe adicionada na tag <body> da pgina criada, como podemos observar no exemplo abaixo:
24
<body class="twoColFixLtHdr">
O uso desse recurso, como citado, para a utilizao de diferentes layouts, por exemplo: duas e trs colunas. Se usarmos apenas um tipo de layout o que mais comum - melhor removermos esta classe. Vamos ver uma maneira simples e eficiente de faz-la. Primeiro selecionamos o nome da classe juntamente com o espao posterior ao nome. Observemos o exemplo abaixo:
Classe CSS selecionada juntamente com o espao posterior ela
Agora, vamos abrir o painel Find and Replace atravs do menu Edit > Find and Replace... - ou com a tecla de atalho (Ctrl + F). Vejamos:
25
Localizao da opo Find and Replace no menu Edit
Aberto o painel, precisamos configur-lo, como exemplificado na imagem abaixo:
Painel Find and Replace configurado
26
Assim, definimos em Find in o documento (a pgina) em questo; em Search escolhemos Source Code para que a anlise seja feita no cdigo fonte somente. Em Find, o nome da classe normalmente j vem definido, uma vez que selecionamos o referido nome e aps aberto o painel Find and Replace. O que ser feito com essas configuraes uma busca no cdigo fonte da pgina por .twoColFixLfHdr e substitu-lo por nada, o que, na verdade, a mesma coisa que remov-lo. Definidas as configuraes necessrias e compreendido o que ser feito, podemos clicar no boto Replace All e conferir o resultado. Agora que as declaraes CSS no esto mais precedidas pela classe referente ao layout escolhido, podemos remov-la do seletor body na pgina. Para isso, primeiramente devemos selecionar a tag <body> atravs do Tag selector e depois clicar com o boto direito do mouse sobre ela e escolher a opo None no menu Set Class, como podemos observar na imagem abaixo:
Opo None do menu Set Class
27
Como os Layouts CSS so representados no Dreamweaver CS3

J conhecemos os tipos de layouts CSS disponibilizados pelo Dreamweaver e sabemos que para escolher um deles utilizamos o painel New Document, como demonstrado abaixo:
Painel New Document e a representao de um tipo de layout CSS
Para cada tipo de layout CSS, o Dreamweaver utiliza um cone para representlo. Vamos conhec-los e ao mesmo tempo sabe qual layout eles representam.
Representao de um layout do tipo Elastic
28
A imagem acima representa layouts do tipo Elastic, ou seja, layouts que utilizam os valores de medida para o tamanho total do layout ou das colunas que o compe, especificados com unidades em (em).
Representao de um layout do tipo Fixed
A imagem acima ilustra layouts do tipo Fixed, ou seja, layouts que utilizam os valores de medida para o tamanho total do layout ou das colunas que o compe, especificados com unidades em pixels (px).
Representao de um layout do tipo Liquid
A imagem acima ilustra layouts do tipo Liquid, ou seja, layouts que utilizam os valores de medida para o tamanho total do layout ou das colunas que o compe, especificados com unidades em percentagem (%).
29
Representao de um layout do tipo Hibrid
A imagem acima ilustra layouts do tipo Hibrid, ou seja, layouts que combinam dois tipos de layouts: elstico e lquido. O tamanho total do layout medido em percentagem, sendo 100%; mas o valor das colunas que compe o layout so definidas em unidades em (em).
Sobre os comentrios nas declaraes CSS

Todas as declaraes CSS utilizadas na criao dos layouts CSS disponibilizados pelo Dreamweaver foram exaustivamente comentadas, o que significa dizer que, alm de facilitar a criao dos layouts com apenas alguns cliques do mouse, agora possvel compreendermos e aprender sobre as declaraes CSS. Agora, ningum ter mais desculpas para no utilizar layouts CSS. Entretanto, a nica restrio dos comentrios das declaraes CSS que eles foram escritos em ingls, assim, se voc no domina tal idioma, planeje estudlo. Ingls uma ferramenta de trabalho e estudo indispensvel para um profissional web. Observemos na imagem abaixo um exemplo dos comentrios sobre as declaraes CSS de um layout:
30
Declaraes CSS comentadas
O exemplo acima referente a um layout com uma coluna do tipo elasstic. Esse layout centralizado na janela do navegador de internet do usurio. Vamos compreender como isso possvel? O primeiro passo utilizar uma tag que englobe todo o contedo da pgina. Observemos a imagem abaixo:
Tag <div> utilizada como recipiente
31
As declaraes CSS utilizadas para essa tag so as seguintes:
Propriedade width e margin no seletor #container
O que essas declaraes CSS fazem determinar um tamanho mximo - width: 46em e utilizar a propriedade margin com o valor "0 auto", ou seja, margem zero para cima e para baixo e margem automtica - determinada pelo navegador - para esquerda e direita. Para que compreendamos melhor como determinada a margem automtica, vamos considerar o seguinte exemplo: um usurio acessa uma pgina com uma resoluo de 1024x768 e consideremos que o tamanho mximo determinado seja 750 pixels. Assim sendo, o navegador atribui 137 pixels de margem esquerda e direita. Entendeu? No? Ok, vejamos a explicao abaixo: A resoluo 1024x768 e o tamanho da <div> que engloba todo o contedo da pgina de 750px, certo? Bom, ento 1024px-750px = 274px. Este valor (274px) o browser divide por dois, ficando 137px para a margem direita e esquerda. O resultado seria algo como a imagem abaixo ilustra:
Ilustrao do resultado do efeito das propriedades CSS utilizadas
32
Entretanto, se testarmos esse exemplo no Internet Explorer 5.x para Windows, veremos que o site vai estar alinhado esquerda, como na imagem abaixo:
Ilustrao do layout no IE 5.x para Windows
Isto ocorre por que o Internet Explorer 5.x para Windows no respeita o valor auto para as margens esquerda e direita. Mas no precisamos nos preocupar, existem um "remedinho" para esse problema. Observemos o "remedinho" no seletor body:
Propriedade text-align no seletor body
Agora o resultado:
Ilustrao do layout com a propriedade text-align e valor center no seletor body

33
Como podemos perceber na imagem acima, o Internet Explorer 5.x para Windows tambm interpreta a propriedade e o valor "text-align: center" erroneamente, ou seja, ele alinha os elementos da tag <div> que engloba o contedo da pgina. Para corrigirmos esse problema, basta aplicarmos uma declarao para a referida tag <div> que alinhe o texto esquerda. A soluo seria a seguinte:
Propriedade text-align no seletor #container
E finalmente, o resultado esperado em todos os navegadores:
Ilustrao do resultado do efeito das propriedades CSS utilizadas
importante notarmos que os layouts CSS disponibilizados pelo Dreamweaver CS3 foram planejados, testados e esto todos nossa disposio, portanto, vamos utiliz-los sem moderao e assim tambm poderemos aprender mais com os comentrios das declaraes CSS.
34
Como mover declaraes CSS entre arquivos

Atravs do painel CSS Styles - Window > CSS Styles ou Shift + F11 - possvel mover declaraes CSS de um arquivo para outro ou mover declaraes CSS do cabealho da pgina para um arquivo ou vice-versa. O vdeo explicativo abaixo demonstra como simples e fcil mover declaraes CSS. Vejamos:
ConsideraessobremoverdeclaraesCSS
Como podemos perceber no vdeo explicativo acima, as declaraes CSS foram movidas entre o cabealho da pgina em questo - <style> - e um arquivo CSS - foo-css.css - linkado pgina. No painel CSS Styles so listadas todas as declaraes contidas no arquivo ou na pgina. Para movermos as declaraes CSS desejadas, as selecionamos e em seguida arrastamos para o local desejado. Este, pode ser um outro arquivo ou ento o prprio arquivo, afim de organizar a ordem das declaraes. Simples, no ?
35
Como mover declaraes CSS inline

As declaraes CSS inline so aquelas que so declaradas em um elemento especfico, sendo um tipo de declarao pouca produtiva, uma vez que ela composta por apenas um elemento somente. Mover tal declarao para o cabealho da pgina ou para um arquivo CSS externo aumenta a produtividade da declarao e realizar esse processo super simples. Consideremos o seguinte exemplo para esta unidade:
<h1 style="color:#FF0000; border-bottom: 2px solid #FF0000">Header</h1>
Como podemos ver na imagem acima, o elemento h1 foi estilizado de forma inline. Para que os demais elementos h1 da pgina sejam estilizados como o do exemplo preciso repetir a mesma declarao CSS em todos eles. Se optarmos pelo processo descrito acima, significa que teremos um trabalho rduo e nada produtivo. A soluo para esse problema definir uma classe que contenha essas declaraes e aplic-las nos elementos h1 desejados ou definir a referida declarao para que seja aplicada em todos elementos h1. Sendo assim, vamos mover as declaraes CSS utilizadas no elemento h1 para o cabealho da pgina ou para um arquivo CSS externo atravs da opo Convert Inline CSS to Rule... Tal opo pode ser acessa de vrias lugares. Vamos conhec-los:
Menucontextual
O menu contextual exibido ao clicarmos sobre a pgina com o boto direito do mouse. Se clicarmos sobre um elemento que contenha declarao CSS inline, uma das opes disponveis no menu CSS Styles ser a Convert Inline CSS to Rule...., conforme podemos observar na imagem abaixo:
36
Opo Convert Inline CSS to Rule... do menu CSS Styles no menu contextual exibido com o clique direito do mouse
MenuText
A opo Convert Inline CSS to Rule... disponvel no menu CSS Styles tambm encontrada no menu Text. Vejamos:
Opo Convert Inline CSS to Rule... do menu CSS Styles no menu Text
37
Nota: a opo Convert Inline CSS to Rule... estar disponvel somente se a acessarmos com o ponto de insero sobre um elemento que contenha declarao CSS inline.
Codingtoolbar
Na opo Move or Convert CSS da Coding toolbar - exibida somente no modo de visualizao Code View - encontramos tambm a opo Convert Inline CSS to Rule... Vejamos:
Convert Inline CSS to Rule... na Coding toolbar
Tagselector
Primeiramente precisamos selecionar o elemento que contm a declarao CSS atravs do Tag selector, neste caso, a tag <h1>. Em seguida, precisamos clicar com o boto direito do mouse sobre ela e aparecer a opo Convert Inline CSS to Rule..., conforme podemos ver na imagem abaixo:
Opo Convert Inline CSS to Rule... no Tag selector
38
Como vimos, a opo Convert Inline CSS to Rule... est por toda a inteface do Dreamweaver CS3. Podemos acess-la onde for mais conveniente. Acessada a referida opo teremos o painel Convert Inline CSS. Vamos assistir o vdeo explicativo abaixo para conhecermos as possibilidades desse recurso:
ConsideraessobreopainelConvertInlineCSS
No painel Convert Inline CSS precisamos definir duas coisas: qual o tipo de converso que ser aplicada sobre declarao CSS inline e onde a converso ser colocada. Na opo Convert to informamos o tipo de converso. As opes so as seguintes: A new CSS class, All h1 tags e A new CSS selector. Na primeira opo, as declaraes CSS ficaro em uma classe CSS e essa classe ser definida no elemento que continha as declaraes inline. J na segunda opo, as declaraes CSS sero utilizadas para todos os elementos do mesmo tipo da pgina. E, na terceira opo, um seletor especfico para o elemento em questo ser criado. Em Create rule in, temos as opes Style sheet e The head of this document. Estas opes so utilizadas para dizermos onde a converso ser colocada, isto , se ser em um arquivo CSS existente, Style sheet, ou no cabealho da pgina em questo - The head of this document.
39
Como mover declaraes CSS para um arquivo externo

O Dreamweaver CS3 incluiu novos recursos que facilitam a administrao de CSS em sua interface. Agora possvel movermos as declaraes CSS para um arquivo externo de forma simples, prtica e rpida. Vamos considerar o layout que criamos na unidade anterior, no qual as declaraes CSS foram dispostas no cabealho da pgina. Nosso objetivo, a ttulo de ilustrao, retirar as declaraes do cabealho e mov-las para um arquivo CSS especfico. Para isso, a primeira coisa a ser feita selecionarmos as declaraes que desejamos mover. Feito isso, existem diversos caminhos para realizarmos nosso objetivo (mover as declaraes CSS). Vamos conhec-los.
Menucontextual
O menu contextual exibido ao clicar sobre a pgina com o boto direito do mouse. Se o click for feito sobre uma seleo de declaraes CSS, uma das opes disponveis no menu CSS Styles ser a Move CSS Rules..., conforme podemos ver na imagem abaixo:
Opo Move CSS Rules do menu CSS Styles no menu contextual exibido com o clique direito do mouse
40
MenuText
A opo Move CSS Rules... disponvel no menu CSS Styles tambm encontrada no menu Text. Vejamos:
Opo Move CSS Rules... do menu CSS Styles no menu Text
PainelCSSStyles
No menu de opes do painel CSS Styles, Window > CSS Styles ou Shift + F11 tambm encontramos a opo Move CSS Rules.... Observemos na imagem abaixo:
Move CSS Rules... no menu de opes do painel CSS Styles
41
Codingtoolbar
Na opo Move or Convert CSS da Coding toolbar - exibida somente no modo de visualizao Code View - encontramos tambm a opo Move CSS Rules... Vejamos:
Move CSS Rules... na Coding toolbar
Como vimos, a opo Move CSS Rules... est por toda a inteface do Dreamweaver CS3, ou seja, podemos acess-la onde for mais conveniente. Acessada a referida opo teremos o painel Move To External Style Sheet, como podemos ver na imagem abaixo:
Panel Move To External Style Sheet
42
Nesse painel, informaremos o lugar para onde as declaraes CSS devero ser movidas. As opes so duas:
1. Style sheet: - nesta opo devemos informar um arquivo CSS existente e assim as declaraes CSS selecionadas sero movidas para ele. 2. A new style sheet...: - nesta opo, ao clicar no boto OK, teremos que determinar um nome e local onde o arquivo CSS ser criado. nesse arquivo que estaro as declaraes CSS selecionadas.
43
O que o Spry?
O Spry um framework client-side no formato de bibliotecas JavaScript e CSS. Voc poder utiliz-lo em seus novos projetos ou nos j existentes. Atravs do Spry possvel desenvolver interfaces mais ricas e dinmicas, alm da possibilidade de integrar dados no formato XML s pginas HTML. Dessa forma, elas podero exibir contedos dinmicos e sem a necessidade de tais pginas se recarregarem por completo. O Spry foi incorporado a interface do Dreamweaver CS3 e disponibilizado em duas perspectivas: uma para designers e outra para programadores. Os profissionais de ambas as reas necessitam apenas de conhecimentos bsicos de HTML, CSS e JavaScript, uma vez que o trabalho rduo de configurao foi facilitado pelo Dreamweaver. Os designers podero criar efeitos visuais como Appear, Fade, Blinds (Up e Down), Grow, Shake, Slide, entre vrios outros. J os programadores tero facilidades ao trabalhar com o Ajax e na exibio de dados armazenados em arquivos XML. Alm desses recursos, tantos para designers quanto para programadores, o Spry oferece alguns widgets que auxiliam na validao de formulrios e na criao de elementos de interfaces. Como dito, o Spry so bibliotecas, ou arquivos, JavaScript e CSS e, cada um desses arquivos desempenham um papel especfico, isto , os arquivos JavaScript so os responsveis pela interatividade que o recurso proporciona; j os arquivos CSS so responsveis em estilizar o recurso produzido No decorrer das unidades deste captulo, conheceremos o Spry a fundo e veremos as possibilidades que podero ser desenvolvidos com tal framework. Alm de conhecer sua integrao com o Dreamweaver CS3, claro.
Conhecendo os recursos do Spry

Neste unidade conheceremos todos os recursos oferecidos pelo Spry, ou seja, o Spry Data, Spry Widgets e Spry Effects.
SobreoSpryData
Visualizao da aba Data da Insert bar

44
Os recursos que fazem parte do grupo Spry Data so utilizados para trabalhar com dados em arquivos XML. Atravs desses recursos, poderemos exibir tais dados de diversas maneiras, como por exemplo, em uma tabela ou em uma lista. O que os recursos do Spry Data fazem criarem pequenos pedaos de cdigos em sua pgina, os quais sero responsveis em carregar os dados do arquivo XML e exib-los quando o usurio abrir a pgina em seu navegador.
OsrecursosdoSpryData,soosseguintes:
Spry XML Data Set - para o funcionamento dos demais recursos necessrio que se utilize, primeiramente, este recurso. Com ele, definimos os dados com os quais iremos trabalhar, ou seja, qual o arquivo XML que ser utilizado. Spry Region - por padro uma tag HTML, a tag <div>, que utilizada como um recipiente para alguns elementos como tabelas e listas. Todos os recursos do Spry Data precisam estar aninhandos a um Spry Region. Se tentarmos inserir algum recurso do Spry Data antes de inserir um Spry Region, o Dreamweaver exibe um lembrete e pergunta se desejamos adicionar um Spry Region. Spry Repeat - utilizado para a criao de um mecanismo de loop entre os dados de um determindo Spry XML Data Set que ir se repetir e exibir os dados enquanto houver itens a serem exibidos. Spry Repeat List - um recurso para exibir os dados em forma de lista. Seja uma lista ordenada, no ordenada, lista de definio, ou um elemento de formulrio do tipo select. Spry Table - h dois tipos de Spry Table: uma tabela simples e outra dinmica. Essa ltima chamada de "dynamic master table" e responsvel por fazer uma ligao entre um Spry Repeat com o intuito de atualizar os dados dinmicamente.
SobreoSpryWidgets
Visualizao da aba Layout da Insert bar
45
Visualizao da aba Forms da Insert bar
Um Spry widget um elemento de interface que enriquece a experincia do usurio junto pgina que o utiliza. Ele composto pelas seguintes partes: Estrutura - cdigos HTML que definem a composio estrutural do widget. Comportamento - cdigos JavaScript que controlam as respostas do widget mediante os eventos ocasionados pelo usurio. Apresentao - declaraes CSS que especificam a aparncia do widget. Assim como os widgets, todos os outros recuros do Spry so compostos pelas partes acima citadas. O Dreamweaver CS3 desenvolve e configura todas essas estruturas em poucos e simples cliques.
OsrecursosdoSpryWidgets,soosseguintes:
Spry Menu Bar - utilizados na criao de menus drop-down horizontais ou verticais. Spry Tabbed Panels - um grupo de painis organizados por abas, onde cada uma delas exibida por vez. muito utilizado na exibio de extenso contedo em espaos compactos. Spry Accordion - um grupo de painis "dobrveis", onde cada um deles aberto e visvel por vez. muito utilizado na exibio de extenso contedo em espaos compactos. Spry Collapsible Panel - um painel em que o usurio pode exibir ou esconder seu contedo. Spry Validation text Field - so campos de formulrios que demonstram se o valor digitado em tais campos so vlidos ou no. Spry Validation Textarea - so reas de texto que demonstram se o valor digitado em tais campos representam uma determinada sentena de texto ou no.
46
Spry Validation Checkbox - um checkbox ou um grupo de checkboxes em um formulrio HTML que demonstram se a quantidade de checkbox selecionados pelo usurio, ou a no seleo, uma ao vlida ou no. Spry Validation Select - so campos de formulrio do tipo select ou drop-down menu que demonstram se a opo escolhida em tais campos uma opo vlida ou no.
SobreoSpryEffects
Opo de efeitos no painel Behaviors.
Os recursos do Spry Effects so utilizados para enriquecer visualmente um elemento HTML utilizando para tal o JavaScript. Esses recursos, ou efeitos, podem ser aplicados em quase todos os elementos HTML. Na maioria das vezes, so utilizados para realar uma informao, criar animao em transies, alterar o estado visual de um elemento por um determinado perodo, entre vrios outros recursos.
OsrecursosdoSpryEffects,soosseguintes:
Appear/Fade - faz com que um elemento aparea ou desaparea da interface utilizando a opacidade de tal elemento. Highlight - muda a cor de fundo, background, de um elemento.
47
Blind Up/Down - efeito que simula uma cortina se abrindo ou fechando. Muito utilizado para esconder ou revelar um determinado contedo. Slide Up/Down - move o elemento para cima ou para baixo. Grow/Shrink - aumenta ou diminui o tamanho de um elemento. Shake - utilizado para sacudir um elemento para a esquerda e para direita. Squish - desaparece com o elemento em direo ao canto superior esquerdo da pgina.
Conhecendo o funcionamento do Spry

Nesta parte vamos analisar o funcionamento do Spry, para que assim, possamos compreender sua arquitetura e entender como os recursos so aplicados. Se o Spry so arquivos JavaScript e CSS, certamente precisaremos de tais arquivos para que o recurso desejado funcione. Para cada recurso do Spry, temos um arquivo JavaScript e um outro CSS. Ambos os arquivos so adicionados ao site em questo quando a pgina que est utilizando o recurso for salva. J no cabealho da pgina adicionado uma referncia a tais arquivos. A referncia do arquivo no cabealho da pgina passa por dois momentos. Um quando a pgina ainda no foi salva, e o outro, quando ela j foi. Ou seja, quando a pgina ainda no foi salva, os arquivos referente ao recurso esto armazenados no diretrio em que o Dreamweaver foi instalado em sua mquina. Quando voc salvar a pgina, ele ser adicionado a um diretrio no site em que voc o utilizou. Po padro, esse diretrio denominado como SpryAssets e criado na pasta raiz. Observe uma ilustrao da referncia dos arquivos do Spry nessas duas situaes, respectivamente:
Referncia dos arquivos no diretrio de instalao do Dreamweaver
48
Referncia dos arquivos no diretrio em seu site
Se voc enviar para o seu servidor web na internet uma pgina como no primeiro exemplo, o recurso do Spry utilizado no funcionar, uma vez que as pessoas que acessarem a pgina no tero esses arquivos em suas mquinas. A forma correta enviar de acordo com a segunda opo demontrada acima onde, alm de enviarmos a pgina, enviamos tambm o diretrio em que os arquivos referente ao recurso utilizado foram armazenados. Quando uma pgina for salva e ela estiver utilizando algum recurso do Spry, o Dreamweaver CS3 nos alerta sobre essa questo, alm de nos informar tambm o diretrio e o nome dos arquivos que foram salvos. Observemos a caixa de dilogo exibida:
Caixa de dilogo, Copy Dependent Files
49
Como dito anteriormente, o diretrio em que os arquivos do Spry so armazenados denomiado, por padro, como SpryAssets. Se desejarmos alterar o diretrio onde so armazenados, preciso definirmos na categoria Spry do Gerenciador de sites no Dreamweaver o nome desejado, conforme podemos observar na imagem abaixo:
Definindo a pasta "SpryAssets"
Para acessar esta opo, precisamos seguir o seguinte caminho: Menu Site > Manage Sites.... No menu aberto, temos que escolher o site desejado e posteriormente clique no boto Editar. importante nos certificarmos que estamos na aba Advanced, uma vez que a aba Basic no oferece tal opo. Uma vez que os arquivos foram referenciados corretamente, so necessrios outros dois "ingredientes" para o funcionamento do recurso em questo. Estamos falando de um estrutura de cdigo HTML que condiz com o recurso e uma chamada e configurao do recurso. Vejamos o exemplo abaixo:
50
Cdigo HTML referente ao recurso Tabbed Panels
No vamos nos preocupar em compreender os detalhes sobre esses cdigos agora, iremos conhec-los melhor nas unidades seguintes. O importante e obrigatrio neste momento observar que a chamada da funo relativa ao recurso feita posteriormente ao cdigo HTML. Caso ela seja feita anteriormente a tal cdigo, o recurso no funcionar.
Spry e a interface do Dreamweaver CS3

Na interface de desenvolvimento do Dreamweaver CS3 os recursos do Spry foram agrupados em trs grupos: Spry Data, Spry Widgets e Spry Effects. O primeiro oferece recursos para se trabalhar com dados em arquivos XML; o segundo utilizado na validao de formulrios web e na criao de elementos de interface; e o Spry Effects como o prprio nome diz, so efeitos produzidos em elementos HTML. Os recursos Spry Widgets podem ser dividos em dois grupos: um com os recursos de validao de formulrios web e outro na criao de elementos de interface.
51
Ambos os recursos esto localizados na aba Spry da Insert bar, com exceo dos recursos do Spry Effects que se localizam na opo Effects do painel Behaviors. Cada recurso do Spry est relacionado com finalidades distintas, portanto, podemos localizar tais recursos em outras abas. Por exemplo, na aba Data, temos as opes do Spry Data; na aba Forms, os Widgets para validao de formulrios; na aba Layout, os Widgets para a criao de elementos de interface. O Property inspector utilizado na configurao dos recursos em uso. As configuraes de cada recurso so exibidas ao selecionar o recurso em questo no Document window. Vamos conhecer, atravs das ilustraes abaixo, as referidas abas e os recursos do Spry.
Visualizao da aba Spry na Insert bar
Visualizao da aba Layout da Insert bar
Como dito, na aba Layout temos os widgets para a criao de elementos de interface. Iniciando da esquerda para a direita na referida aba, temos os seguintes recursos: Spry Menu Bar, Spry Tabbed Panels, Spry Accordion e Spry Collapsible Panel.
Visualizao da aba Forms da Insert bar
52
Na aba Layout, h os widgets para a validao de formulrios web. Da esquerda para a direita na aba Forms, temos os seguintes widgets: Spry Validation Text Field, Spry Validation Textarea, Spry Validation Checkbox, Spry Validation Select.
Visualizao da aba Data da Insert bar
Ao contrrio das abas Layout e Forms, na aba Data temos cinco recursos que so utilizados para trabalhar com dados em arquivos XML. So eles, da esquerda para a direita: Spry XML Data Set, Spry Region, Spry Repeat, Spry Repeat List e Spry Table. Como mencionado anteriormente, os recursos do Spry Effects se localizam na opo Effects do painel Behaviors (Shift + F4). Vejamos:
Opo de efeitos no painel Behaviors.
Outro elemento da interfade do Dreamweaver CS3 que utilizamos para trabalhar com Spry o Property inspector. medida que selecionamos um recurso do Spry no Documento window, ele exibe as configuraes pertinentes a tal recurso.
53
Essa facilidade nos permite personalizar o recurso de forma fcil, simples e intuitiva. Vejamos o exemplo abaixo:
Property inspector com o Spry Tabbed panels selecionado no Documento window
Em uma prxima unidade, conheceremos cada um desses recursos e suas funcionalidades. At l.
Spry Menu Bar

O Spry Menu Bar utilizado para criar menus drop-down horizontais ou verticais de at trs nveis. Com o Dreamweaver CS3 muito simples criar menus desse estilo com utilizando esse recurso. Veremos nesta unidade todo o procedimento de criao. O recurso Spry Menu Bar est localizado em duas abas na Insert bar: na aba Layout e Spry. Vejamos a imagem abaixo:
Spry Menu Bar na aba Layout
Spry Menu Bar na aba Spry
54
Para utlizarmos esse recurso, temos que colocar o ponto de insero no local em que desejamos criar o Spry Menu Bar e em seguida, clicar sobre o cone do recurso demonstrado acima. Feito isso, ser exibido o painel Spry Menu Bar. Nele poderemos escolher uma dentre as duas opes de layout: horizontal ou vertical. Vamos observar a imagem abaixo:
Exemplo do painel Spry Menu Bar
Ao clicar em "OK" o Dreamweaver CS3 ir criar as trs partes que compe o widget em questo, ou seja, a estrutura - que so os cdigos HTML que definem a composio estrutural do widget; o comportamento - que so os cdigos JavaScript que controlam as respostas do widget mediante aos eventos ocasionados pelo usurio; e a apresentao - que so as declaraes CSS que especificam a aparncia do widget. Como pode-se perceber, o Dreamweaver criou todas essas partes em apenas dois cliques. Simples, no? Para configurar o Spry Menu Bar, preciso selecionar esse recurso no Document window. Assim, o Property inspector exibir as propriedades do recurso selecionado. Para selecionar o Spry Menu Bar, como mencionado, necessrio selecion-lo no Document window, atravs de uma aba que o engloba, como podemos observar abaixo:
55
Aba que engloba o Spry Menu Bar no Document window
Outra opo, selecionar a tag <ul> atravs do Tag selector. Esta tag referente ao Spry Menu Bar tem uma classe CSS denominada como MenuBarHorizontal ou MenuBarVertical. Vejamos um exemplo:
Tag ul no Tag selector referente ao Spry Menu Bar
Uma vez selecionado, poderemos configur-lo atravs do Property inspector. Uma observao importante: tanto o layout Horizontal, quanto o Vertical, possuem as mesmas configuraes, o que os diferenciam so as declaraes CSS. Portanto, as configuraes aqui demonstradas, so teis tanto para um, quanto para o outro. Vamos assistir ao vdeo explicativo abaixo, e vejamos as opes disponveis para configurar o Spry Menu Bar:
56
Quanto estilizao do Spry Menu Bar, podemos abrir o arquivo SpryMenuBarHorizontal.css ou SpryMenuBarVertical.css localizada na pasta SpryAssets e fazer as alteraes desejadas. Este arquivo est totalmente comentado, o que facilita o entendimento de como foi utilizada cada declarao CSS referente ao menu. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pasta demos como o nome spry-menu-bar-example.htm.
Spry Tabbed Panels

O Spry Tabbed Panels um grupo de painis organizados por abas, onde cada uma delas exibida por vez, ou seja, quando o contedo de uma aba exibido, os demais permancem oculto. Esse tipo de recurso muito utilizado na exibio de extenso contedo em espaos compactos. Com o Dreamweaver CS3 o Spry Tabbed Panels inserido com apenas um clique. E tal recurso est localizado em duas abas na Insert bar, na aba Layout e Spry. Observemos as imagens abaixo:
Spry Tabbed Panels na aba Layout
Spry Tabbed Panels na aba Spry
Como exemplo, vamos colocar o ponto de insero no local em que se deseja criar o Spry Tabbed Panels e em seguida devemos clicar sobre o cone do recurso demonstrado acima. Feito isso, ser criado o recurso em nossa pgina, como demonstrado na ilustrao abaixo. Observemos:
57
Spry Tabbed Panels criado no Document window
Como podemos perceber, com apenas um clique, o Dreamweaver CS3 criou as trs partes que compe o widget em questo, ou seja, a estrutura - que so os cdigos HTML que definem a composio estrutural do widget; o comportamento - que so os cdigos JavaScript que controlam as respostas do widget mediante aos eventos ocasionados pelo usurio; e a apresentao - que so as declaraes CSS que especificam a aparncia do widget. Para configurar o Spry Tabbed Panels, preciso selecionar esse recurso no Document window. Assim, o Property inspector exibir as propriedades do recurso selecionado. Para selecionar o Spry Tabbed Panels, como mencionado, necessrio selecion-lo no Document window, atravs de uma aba que o engloba. Observemos:
Aba que engloba o Spry Tabbed Panels no Document window
Outra opo que temos selecionar a tag <div> atravs do Tag selector. A tag <div> referente ao Spry Tabbed Panels tem uma classe CSS denominada como Tabbed Panels. Vejamos um exemplo:
58
Tag div no Tag selector referente ao Spry Tabbed Panels
Uma vez selecionado o Spry Tabbed Panels, o Property inspector exibir as configuraes desse recurso. Observemos:
Property inspector com as opes de configurao do Spry Tabbed Panels
Na configurao do Spry Tabbed Panels possvel definir o ID da tag <div> referente ao recurso; criar ou remover abas; definir a ordem das abas, afim de organiz-las; e por fim, definir qual ser a aba padro, atravs da opo Default panel. Definir uma aba padro, significa dizer ao Spry Tabbed Panels qual ser a aba que permancer aberta quando a pgina que contm o recurso carregar. Para definir o contedo de cada uma das abas, basta selecionar a aba desejada no Property inspector, que o Document window exibir a rea de contedo da aba selecionada. Como podemos perceber, as configuraes do Spry Tabbed Panels so semelhantes s do Spry Menu Bar, o que facilita o aprendizado dos recursos e suas formas de uso.
59
Quanto a estilizao do Spry Tabbed Panels, precisamos abrir o arquivo SpryTabbedPanels.css localizada na pasta SpryAssets e fazer as alteraes desejadas. Este arquivo est totalmente comentado, o que facilita o entendimento da utilizao de cada declarao CSS referente ao recurso. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-tabbed-panels-example.htm.
Spry Accordion
O Spry Accordion um grupo de painis "dobrveis", onde cada um deles visvel e aberto por vez. Este tipo de recurso muito utilizado na exibio de extenso contedo em espaos compactos. Assim como o Spry Tabbed Panels, o Spry Accordion inserido com apenas um clique. Tal recurso est localizado em duas abas na Insert bar, na aba Layout e Spry. Observemos as imagens abaixo:
Spry Accordion na aba Layout
Spry Accordion na aba Spry
Como exemplo, vamos colocar o ponto de insero no local em que desejamos criar o Spry Accordion e em seguida clicar sobre o cone do recurso demonstrado acima. Feito isso, ser criado o recurso em nossa pgina, como demonstrado na ilustrao abaixo:
60
Spry Accordion criado no Document window
Como podemos perceber, com apenas um clique o Dreamweaver CS3 criou as trs partes que compe o widget em questo. Ou seja, a estrutura - que so os cdigos HTML que definem a composio estrutural do widget; o comportamento - que so os cdigos JavaScript que controlam as respostas do widget mediante aos eventos ocasionados pelo usurio; e a apresentao - que so as declaraes CSS que especificam a aparncia do widget. Para configurarmos o Spry Accordion preciso selecionar esse recurso no Document window. Dessa forma, o Property inspector exibir as propriedades do recurso selecionado. Para selecionarmos o Spry Accordion, como mencionado, necessrio selecion-lo no Document window, atravs de uma aba que o engloba. Observemo as imagens abaixo:
61
Aba que engloba o Spry Accordion no Document window
Como outra opo, podemos selecionar a tag <div> atravs do Tag selector. Essa tag referente ao Spry Accordion tem uma classe CSS denominada como Accordion. Vejamos o exemplo abaixo:
Tag div no Tag selector referente ao Spry Accordion
Uma vez selecionado o Spry Accordion, o Property inspector exibir as configuraes desse recurso. Observemos:
62
Property inspector com as opes de configurao do Spry Accordion
Na configurao do Spry Accordion possvel definir o ID da tag <div> referente ao recurso; criar ou remover novos painis para o Accordion; definir a ordem dos referidos painis e organiz-los. Ao contrrio do que ocorre na mesma parte com o Spry Tabbed Panels, o Property inspector no exibe uma opo para que seja determinado qual o painel padro do Spry Accordion, ou seja, qual permanecer aberto quando a pgina que o contm se carregar. Contudo, podemos ter o mesmo efeito de forma bem simples. Primeiramente temos que alterar o modo de visualizao para Code View. Feito isso, podemos observar abaixo o cdigo gerado pelo pelo Dreamweaver CS3:
Cdigo referente ao Spry Accordion
Bom, observe que "Accordion1" refere-se ao ID da tag <div> relativa ao Spry Accordion em questo. Dessa forma, o que precisamos fazer acrescentar um novo parmetro chamada desse widget. No pelo fato do Dreamweaver no oferecer essa opo facilmente, que vamos deixar de utiliz-la. Observemos a imagem abaixo:
63
Cdigo referente ao Spry Accordion definido o painel padro
Agora precisamos definir a opo "defaultPanel" com o valor 1. Dessa forma, o segundo painel ser o padro; sim, o segundo, uma vez que a contagem inicia-se do zero. Pronto, nosso painel est pronto. Em relao estilizao do Spry Accordion, precisamos abrir o arquivo SpryAccordion.css localizada na pasta SpryAssets e fazer as alteraes que desejarmos O arquivo est totalmente comentado, o que facilita o entendimento da utilizao de cada declarao CSS referente ao recuso. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-accordion-example.htm.
Spry Collapsible Panel

O Spry Collapsible Panel um tipo de panel em que o usurio pode esconder ou revelar seu contedo. Este tipo de recurso muito utilizado na exibio de extenso contedo em espaos compactos. Assim como o Spry Tabbed Panels e o Spry Accordion, o Spry Collapsible Panel inserido com apenas um clique, estando localizado em duas abas na Insert bar, na aba Layout e Spry. Observemos as imagens abaixo:
Spry Collapsible Panel na aba Layout
64
Spry Collapsible Panel na aba Spry
Como exemplo, vamos colocar o ponto de insero no local em que se desejamos criar o Spry Collapsible Panel e em seguida clicar sobre o cone do recurso demonstrado acima. Feito isso, ser criado o recurso em nossa pgina como demonstrado na ilustrao abaixo:
Spry Collapsible Panel no Document window
Como podemos perceber, com apenas um clique, o Dreamweaver CS3 criou as trs partes que compe o widget, ou seja, a estrutura - que so os cdigos HTML que definem a composio estrutural do widget; o comportamento - que so os cdigos JavaScript que controlam as respostas do widget mediante aos eventos ocasionados pelo usurio; e a apresentao - que so as declaraes CSS que especificam a aparncia do widget. Para configurarmos o Spry Collapsible Panel, preciso selecionarmos esse recurso no Document window. Assim, o Property inspector exibir as propriedades do recurso selecionado. Para selecionarmos o Spry Collapsible Panel, como mencionado, necessrio selecion-lo no Document window, atravs da aba que o engloba. Observemos:
65
Aba que engloba o Spry Collapsible Panel no Document window
Como outra opo, podemos selecionar a tag <div> atravs do Tag selector. A tag <div> referente ao Spry Collapsible Panel tem uma classe CSS denominada como CollapsiblePanel. Vejamos um exemplo:
Tag div no Tag selector referente ao Spry Collapsible Panel
Uma vez selecionado o Spry Collapsible Panel, o Property inspector exibir as configuraes desse recurso. Vejamos a imagem abaixo:
Property inspector com as opes de configurao do Spry Collapsible Panel
66
Na configurao do Spry Collapsible Panel possvel definir o ID da tag <div> referente ao recurso; definir se o contedo do painel aparecer aberto - Open - ou fechado - Closed - quando for exibido na navegador de internet, atravs da opo Default state, ou seja, estado padro. Ao marcar o checkbox relacionada opo Enable animation, o Spry Collapsible Panel utilizar uma animao para exibir ou ocultar o contedo; se tal checkbox no for marcada, a animao no ser utilizada. J a opo Display - que assim como a opo Default state tem as definies Open e Closed - define se o contedo do painel ser exibido ou ocultado no Document window do Dreamweaver CS3 e no no navegador de internet. Em relao estilizao do Spry Collapsible Panel, precisamos abrir o arquivo SpryCollapsiblePanel.css localizada na pasta SpryAssets e fazer as alteraes desejadas. O arquivo est totalmente comentado, o que facilita o entendimento da utilizao de cada declarao CSS referente ao recuso. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-collapsible-panel-example.htm.
Spry Validation Text Field

Spry Validation Text Field so campos de formulrios que demonstram se o valor digitado em tais campos so vlidos ou no. Com ele tambm possvel definir o tipo de configurao, quando a validao ocorrer, entre outras opes que veremos no decorrer desta unidade. O Spry Validation Text Field est localizado em duas abas na Insert bar, na aba Forms e Spry. Vejamos as imagens abaixo:
Spry Validation Text Fiedl na aba Forms
Spry Validation Text Fiedl na aba Spry
67
Como exemplo, vamos colocar o ponto de insero no local em que se deseja criar o Spry Validation Text Field e em seguida cliacar sobre o cone do recurso demonstrado acima. Feito isso, precisamos configurar o painel Input Tag Accessibility Attribute como de praxe. Vejamos a imagem abaixo:
Exemplo de configurao do painel Input Tag Accessibility Attribute
Caso no tenhamos criado um formulrio, o Dreamweaver nos perguntar se gostaramos de cri-lo, conforme imagem abaixo:
Dreamweaver lhe perguntando: quer inserir uma tag de formulrio?
68
O resultado no Document window que devemos ter semelhante imagem abaixo:
Spry Validation Text Field no Document window
Como o Spry Validation Text Field um widget, o Dreamweaver CS3 criou as trs partes que o compe, ou seja, a estrutura - que so os cdigos HTML que definem a composio estrutural do widget; o comportamento - que so os cdigos JavaScript que controlam as respostas do widget mediante aos eventos ocasionados pelo usurio; e a apresentao - que so as declaraes CSS que especificam a aparncia do widget. Se seleciornamos o campo de texto no Document window, o Property inspector exibir as configuraes referente a ele. Para que o Property inspector mostre as configuraes relacionadas ao Spry Validation Text Field necessrio seleciornamos a aba que engloba o campo de texto. Vejamos o exemplo abaixo:
Aba que engloba o Spry Validation Text Field no Document window
Como outra opo, podemos selecionar a tag <span> atravs do Tag selector. Esta tag referente ao Spry Validation Text Field tem um ID denominado como sprytextfieldX, onde X ser um nmero. Ao inserirmos um Spry Validation Text Field na pgina, o ID ser sprytextfield1, ao inserir o segundo, o ID ser sprytextfiel2, e assim por diante. Vejamos abaixo o Tag selector com o Spry Validation Text Field selecionado:
69
Tag span referente ao Spry Validation Text Field
Uma vez selecionado o Spry Validation Text Field, o Property inspector exibir as configuraes desse recurso. Vamos assistir ao vdeo explicativo abaixo para aprender a configur-lo:
ConsideraessobreoSpryValidationTextField
Como vimos no vdeo explicativo acima, a opo Type exibe uma grande variedade de tipos de validao. Nela, podemos escolher a que melhor se adeque ao tipo de dados que sero informados no campo. Por exemplo: um endereo de e-mail - Email Address; nmeros inteiros - Integer, entre outros. As opes do Preview states so utilizadas para visualizarmos no Document window o estado em que o campo ficar em determinada situao no navegador de internet. Por exemplo, a opo Initial mostra o campo quando a pgina for
70
carregada; j a opo Required, mostra como o campo ficar se no for informado um valor. Na opo Validate on existem trs opes relativa a quando a validao dever ocorrer. A opo Submit - que ocorre quando o usurio envia o formulrio - padro e no tem como ser alterada. As demais opes, Blur e Change, podem ser adicionadas, se desejarmos. A primeira ocorre sempre que o usurio clica fora do campo. J a segunda acontece quando o usurio altera o texto contido no campo de formulrio em questo. As opes Min chars e Max chars so utilizadas para definir a quantidade mnima e mxima de caracteres a serem digitados, respectivamente. J a opo Hint, exibe uma sugesto de preenchimento quando a pgina carregada, ao clicar sobre o campo, tal sugesto removida. Em relao estilizao do Spry Validation Text Field, precisamos abrir o arquivo SpryValidationTextField.css localizado na pasta SpryAssets e fazer as alteraes desejadas. O arquivo est totalmente comentado, o que facilita o entendimento da utilizao de cada declarao CSS referente ao recuso. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-validation-text-field-example.htm.
Spry Validation Textarea

O Spry Validation Textarea utilizado para demonstrar se os caracteres digitados em uma textarea representam uma determinada sentena de texto, ou no. Por exemplo, se o usurio dever digitar no mnixo X caracteres e no mximo Y, entre outras possibilidades. O Spry Validation Textarea est localizado em duas abas na Insert bar, na aba Forms e Spry. Vejamos as imagens abaixo:
Spry Validation Textarea na aba Forms
71
Spry Validation Textarea na aba Spry
Como exemplo, devemos colocar o ponto insero no local em que se desejarmos criar o Spry Validation Textarea e em seguida, clicar sobre o cone do recurso demonstrado acima. Feito isso, precisamos configurar o painel Input Tag Accessibility Attribute como de praxe. vejamos a imagem abaixo:
72
Spry Validation Textarea no Document window
Como o Spry Validation Textarea um widget, o Dreamweaver CS3 criou as trs partes que o compe, ou seja, a estrutura - que so os cdigos HTML que definem a composio estrutural do widget; o comportamento - que so os cdigos JavaScript que controlam as respostas do widget mediante aos eventos ocasionados pelo usurio; e a apresentao - que so as declaraes CSS que especificam a aparncia do widget. Se selecionarmos a textarea no Document window, o Property inspector exibir as configuraes referente a ele. Para que o Property inspector mostre as configuraes relacionadas ao Spry Validation Textarea necessrio selecionarmos a aba que o engloba. Vejamos a imagem abaixo:
73
Aba que engloba o Spry Validation Textarea no Document window
Como outra opo, podemos selecionar a tag <span> atravs do Tag selector. Esta tag referente ao Spry Validation Textarea tem um ID denominado como sprytextareaX. Onde X ser um nmero. Ao inserir um Spry Validation Textarea na pgina, o ID ser sprytextarea1, ao inserir o segundo, o ID ser sprytextarea2, e assim por diante. Vejamos abaixo o Tag Selector com o Spry Validation Textarea selecionado:
Tag span referente ao Spry Validation Textarea
Uma vez selecionado o Spry Validation Textarea, o Property inspector exibir as configuraes desse recurso. Vamos assistir ao vdeo explicativo abaixo para aprender a configur-lo:
74
ConsideraessobreoSpryValidationTextarea
Ao utilizar um Spry Validation Textarea, a primeira coisa que devemos pensar a respeito : o preenchimento ser obrigatrio? Se for, necessrio selecionarmos o checkbox relacionado a opo Required. As opes do Preview states so utilizadas para visualizarmos no Document window o estado em que o campo ficar em determinada situao no navegador de internet. Por exemplo, a opo Initial mostra o campo quando a pgina for carregada, j a opo Required, mostra como o campo ficar se no for informado um valor, neste caso, se a opo Required for selecionada. Na opo Validate on existem trs opes relativa a quando a validao dever ocorrer. A opo Submit - que ocorre quando o usurio envia o formulrio - padro e no tem como ser alterada. As demais opes, Blur e Change, podem ser adicionadas, se desejarmos. A primeira ocorre sempre que o usurio clica fora do campo. J a segunda acontece quando o usurio altera o texto contido no campo de formulrio em questo. As opes Min chars e Max chars so utilizadas para definir a quantidade mnima e mxima de caracteres a serem digitados, respectivamente. Ao definir uma quantidade de caracteres na opo Max chars, pode-se selecionar a opo Block extra characters. Ao selecionar esta opo, o Spry Validation Textarea no permitir a digitao de uma quantidade de caracteres superior informada na opo Max chars. A opo Counter (Contador) oferece trs opes de escolha: None (Nenhum), Chars count (Contar os caracteres) e Chars remaining (Contar os caracteres restantes). Com a opo Chars count, o Spry Validation Textarea contar quantos caracteres foram digitados; j a opo Chars remaining contar quantos caracteres ainda podero ser digitados. J a opo Hint exibe uma sugesto de preenchimento quando a pgina carregada, ao clicar sobre o campo, tal sugesto removida. Em relao estilizao do Spry Validation Textarea, precisamos abrir o arquivo SpryValidationTextArea.css localizado na pasta SpryAssets e fazer as alteraes desejadas. O arquivo est totalmente comentado, o que facilita o entendimento da utilizao de cada declarao CSS referente ao recuso. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-validation-textarea-example.htm.
75
Spry Validation Checkbox

Spry Validation Checkbox um recurso para validar um checkbox ou um grupo deles em um formulrio HTML. Esse recurso est localizado em duas abas na Insert bar, na aba Forms e Spry, como podemos ver nas imagens abaixo:
Spry Validation Checkbox na aba Forms
Spry Validation Checkbox na aba Spry
Como exemplo, vamos colocar o ponto de insero no local em que desejamos criar o Spry Validation Checkbox e em seguida clicar sobre o cone do recurso demonstrado acima. Feito isso, precisamos configurar o painel Input Tag Accessibility Attribute como de praxe. Vejamos a imagem abaixo:

76
Spry Validation Checkbox no Document window
Como o Spry Validation Checkbox um widget, o Dreamweaver CS3 criou as trs partes que o compe, ou seja, a estrutura - que so os cdigos HTML que definem a composio estrutural do widget; o comportamento - que so os cdigos JavaScript que controlam as respostas do widget mediante aos eventos ocasionados pelo usurio; e a apresentao - que so as declaraes CSS que especificam a aparncia do widget. Se selecionarmos o checkbox no Document window, o Property inspector exibir as configuraes referente a ele; Para que o Property inspector mostre as
77
configuraes relacionadas ao Spry Validation Checkbox necessrio selecionar a aba que o engloba. Vejamos a imagem abaixo:
Aba que engloba o Spry Validation Checkbox no Document window
Como outra opo, podemos selecionar a tag <span> atravs do Tag selector. Esta tag referente ao Spry Validation Checkbox tem um ID denominado como sprycheckboxX, onde X ser um nmero. Ao inserir um Spry Validation Checkbox na pgina, o ID ser sprycheckbox1. Ao inserir o segundo, o ID ser sprycheckbox2, e assim por diante. Vejamos abaixo Tag selector com o Spry Validation Checkbox selecionado:
Tag span referente ao Spry Validation Checkbox
Uma vez selecionado o Spry Validation Checkbox, o Property inspector exibir as configuraes desse recurso. Assista ao vdeo explicativo abaixo, para aprender a configur-lo:
78
ConsideraessobreoSpryValidationCheckbox
Ao utilizar um Spry Validation Chechbox, a primeira coisa que devemos pensar a respeito : a validao ser de um checkbox ou de um grupo deles? Se for de um, devemos escolher a opo Require (single), caso contrrio, Enforce range (multiple). Se a opo Enforce range (multiple) for selecionada, precisamos definir em, Min # of selections, a quantidade mnima de checkboxes a serem selecionadas. Em Max # of selections, devemos definir a quantidade mxima de checkboxes que podero ser selecionados. As opes do Preview states so utilizadas para visualizarmos no Document window o estado em que o campo ficar em determinada situao no navegador de internet. Por exemplo, a opo Initial mostra o campo quando a pgina for carregada. J a opo Required, mostra como o campo ficar se no for informado um valor, neste caso, se a opo Required for selecionada. Na opo Validate on existem trs opes relativa a quando a validao dever ocorrer. A opo Submit - que ocorre quando o usurio envia o formulrio - padro e no tem como ser alterada. As demais opes, Blur e Change, podem ser adicionadas, se desejarmos. A primeira ocorre sempre que o usurio clica fora do campo. J a segunda acontece quando o usurio altera o texto contido no campo de formulrio em questo. Em relao estilizao do Spry Validation Checkbox, precisamos abrir o arquivo SpryValidationCheckbox.css localizado na pasta SpryAssets e fazer as alteraes desejadas. O arquivo est totalmente comentado, o que facilita o entendimento da utilizao de cada declarao CSS referente ao recuso. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-validation-checkbox-example.htm.
79
Spry Validation Select

Spry Validation Select so campos de formulrio do tipo select ou drop-down menu que demonstram se a opo escolhida em tais campos uma opo vlida ou no. Esse recurso est localizado em duas abas na Insert bar, na aba Forms e Spry, como podemos ver nas imagens abaixo:
Spry Validation Select na aba Forms
Spry Validation Select na aba Spry
Como exemplo, vamos colocar o ponto insero no local em que desejamos criar o Spry Validation Select e em seguida clicar sobre o cone do recurso demonstrado acima. Feito isso, precisamos configurar o painel Input Tag Accessibility Attribute como de praxe. Vejamos a imagem abaixo:
80
81
Spry Validation Select no Document window
Como o Spry Validation Select um widget, o Dreamweaver CS3 criou as trs partes que o compe, ou seja, a estrutura - que so os cdigos HTML que definem a composio estrutural do widget; o comportamento - que so os cdigos JavaScript que controlam as respostas do widget mediante aos eventos ocasionados pelo usurio; e a apresentao - que so as declaraes CSS que especificam a aparncia do widget. Se selecionarmos o select no Document window, o Property inspector exibir as configuraes referente a ele. Para que o Property inspector mostre as configuraes relacionadas ao Spry Validation Select necessrio selecionarmos a aba que o engloba. Vejamos a imagem abaixo:
Aba que engloba o Spry Validation Select no Document window
Como outra opo, podemos selecionar a tag <span> atravs do Tag selector. Esta tag referente ao Spry Validation Select tem um ID denominado como spryselectX, onde X ser um nmero. Ao inserirmos um Spry Validation Select na pgina, o ID ser spryselect1, ao inserir o segundo, o ID ser spryselect2, e assim por diante. Vejamos abaixo o Tag selector com o Spry Validation Select selecionado:
82
Tag span referente ao Spry Validation Select
Uma vez selecionado o Spry Validation Select, o Property inspector, exibir as configuraes desse recurso, conforme podemos observar na imagem abaixo:
Property inspector com o Spry Validation Select selecionado no Document window
ConsideraessobreoSpryValidationSelect
As opes de configurao do Spry Validation Select no se diferenciam muito dos demais widgets do Spry para validao de elementos de formulrios. O diferencial desse recurso est na opo Do not allow (No permita). Esta opo oferece duas possibilidades: Blank value (Valor em branco) e Invalid value (Valor invlido). Ao selecionarmos a primeira opo, no ser permitido a escolha de uma opo que tenha um valor em branco. Quando selecionamos a segunda, esta no permitir a seleo de uma opo que contenha um valor invlido, por ns determinado. Esses valores so conferidos no atributo value da tag option. Vejamos o exemplo abaixo:
<option value="-1">Valor invlido</option>
83
As opes do Preview states so utilizadas para visualizarmos no Document window o estado em que o campo ficar em determinada situao no navegador de internet. Por exemplo, a opo Initial mostra o campo quando a pgina for carregada. J a opo Required, mostra como o campo ficar se no for informado um valor, neste caso, se a opo Required for selecionada. Na opo Validate on existem trs opes relativa a quando a validao dever ocorrer. A opo Submit - que ocorre quando o usurio envia o formulrio - padro e no tem como ser alterada. As demais opes, Blur e Change, podem ser adicionadas, se desejarmos. A primeira ocorre sempre que o usurio clica fora do campo. J a segunda acontece quando o usurio altera o texto contido no campo de formulrio em questo. Em relao estilizao do Spry Validation Select, precisamos abrir o arquivo SpryValidationSelect.css localizado na pasta SpryAssets e fazer as alteraes desejadas. O arquivo est totalmente comentado, o que facilita o entendimento da utilizao de cada declarao CSS referente ao recuso. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-validation-select-example.htm.
Spry XML Data Set

Como dito anteriormente, necessrio a configurao de um Spry XML Data Set para que os demais recursos do Spry Data possam funcionar. Sendo assim, vamos aprender a utilizar tal recurso. Atravs do Spry XML Data Set definiremos quais os dados que utilizaremos em nossa aplicao. Estes dados so armazenados em arquivos XML, como se um fosse um banco de dados. Para este exemplo, utilizaremos um Feed RSS do iMasters, da seo de Dreamweaver do portal. O recurso Spry XML Data Set est localizado em duas abas na Insert bar, na aba Data e Spry. Vejamos as imagens abaixo:
Spry XML Data Set na aba Data
84
Spry XML Data Set na aba Spry
Agora que j sabemos onde localizar o recurso, vamos criar uma pgina HTML e clicar sobre o recurso mencionado. Vejamos o vdeo explicativo abaixo onde iremos aprender a configurar o Spry XML Data Set.
85
ConsideraessobreoSpryXMLDataSet
Ao criar um XML Data Set, o Dreamweaver ir sugerir um nome atravs da seguinte lgica: dsX; onde X ser um nmero de acordo com a quantidade de XML Data Set existente na pgina. Por exemplo, se na pgina houver dois XML Data Set, ele ir sugerir ds3. As letras tambm tem um significado, onde "d" significa data e "s" representa set, portanto, ds = data set. No painel Row Element informamos o elemento que contm os dados que gostaramos de exibir. Na maiorida das vezes o n "node" que se repete na estrutura do arquivo. No caso de um Feed RSS, como o do exemplo, tal n denominado como item. Uma vez escolhido o n, automaticamente a expresso
86
XPath criada. Esta expresso informa onde o n escolhido est localizado no arquivo. XPath (XML Path Language) uma linguagem utilizada para enderear elementos em um arquivo XML. Ela usada como uma linguagem de consulta (query) para arquivos XML, assim como a linguagem SQL utilizada para consultar banco de dados. Para conhecer melhor o XPath e obter mais informaes, visite o W3C no seguinte endereo www.w3.org/TR/xpath. Ao lado da expresso XPath no painel Spry XML Data Set, h um boto denominado como Preview... que ao ser clicado exibe as 20 primeiras linhas do arquivo XML em questo. Na opo Sort, definimos um elemento que ser utilizado na ordenao dos dados. No exemplo acima, vamos selecionar o elemento title e na opo Direction, selecionarmos Ascending. Isto significa dizer que os dados sero exibidos tendo o elemento title exibido de forma ascendente. Tal ordenao ocorre automaticamente quando o XML Data set carregado. Temos algumas opes no final do referido painel, como por exemplo, a opo Distinct on load que evita a exibio de colunas repetidas, se houver. J a opo XML Caching Off previne o Spry XML Data Set de ler o arquivo XML em cache no computador do usurio. Esta opo padro e utilizada para melhorar o desempenho do recurso. Temos tambm a opo Auto refresh data que utilizada para que o arquivo seja recarregado em um determinado espao de tempo em milisegundos, sendo esse tempo informando no campo milliseconds. importante lembrar que esta opo estar disponvel somente aps a seleo do opo XML Caching Off.
SpryXMLDataSeteoDreamweaver
Uma vez configurado o Spry XML Data Set, o Dreamweaver ir inserir alguns cdigos em nossa pgina, como podemos observar na ilustrao abaixo:
Cdigo HTML aps a insero de um Spry XML Data Set na pgina
87
importante observarmos que para a utilizao do Spry XML Data Set so utilizados dois arquivos: xpath.js e SpryData.js. Sem esses arquivos, o recurso mencionado no funcionar. Seguidos da definio do ds1, ou seja, o data set 1 - nome concedido ao XML Data Set quando foi criado. No focaremos em explicaes de cdigos JavaScript neste curso, uma vez que esse assunto no est no escopo deste curso. Mas no precisamos nos preocupar, Dreamweaver CS3 faz todo esse trabalho para ns. Assim, alm da insero do cdigo mencionado, o Dreamweaver atravs do painel Bindings (Ctrl + F10) exibir os elementos do arquivo referente ao XML Data Set criado. Nesse painel so listados todos os XML Data Set presentes na pgina. Vejamos o exemplo abaixo:
Painel Bindings com a estrutura do ds1
Clicando duas vezes sobre o nome do XML Data Set, no exemplo ds1, o painel Spry XML Data Set exibido, nos permitindo alterar as configuraes realizadas. Para que j trabalhou ou trabalha com banco de dados no Dreamweaver, d para notar que esses passos so semelhantes criao de um Recordset. A diferena que no Spry XML Data Set trabalhamos com dados em arquivos XML, e no Recordset com dados em banco de dados.
88
Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-xml-data-set-example.htm.
Spry Region
Uma vez que j temos o Spry XML Data Set definido, podemos utilizar os demais recursos do grupo Spry Data. Nesta unidade, conheceremos o Spry Region. Spry Region uma tag HTML utizada como um recipiente que converte a marcao HTML dentro dessa referida tag como uma rea dinmica. Por padro, a tag HTML utilizada a tag <div>, mas tambm podemos escolher a tag <span>, caso desejarmos. Todos os recursos do Spry Data precisam estar aninhandos a um Spry Region, ou seja, se tentarmos inserir algum recurso do Spry Data antes de inserir um Spry Region, o Dreamweaver exibir um lembrete e perguntar se desejamos adicionar um Spry Region. O recurso Spry Region est localizado em duas abas na Insert bar, na aba Data e Spry, conforme podemos ver nas imagens abaixo:
Spry Region na aba Data
Spry Region na aba Spry
Agora que conhecemos a localizao do recurso Spry Region, vamos abrir a pgina spry-xml-data-set-example.htm localizada na pasta demos deste curso, ou a pgina que criamos para acompanhar a unidade sobre o Spry XML Data Set. Posteriormente, vamos clicar sobre o referido recurso e assistir ao vdeo explicativo abaixo que ir nos ensinar a configurar o Spry Region.
89
ConsideraessobreoSpryRegion
Se tentarmos criar um Spry Region sem antes ter criado um Spry XML Data Set veremos que no possvel, uma vez que o Spry Region depende de um Spry XML Data Set definido na pgina em questo. O Dreamweaver exibe o painel Insert Spry Region com as definies padro j selecionadas, ou seja, em Container (recipiente) podemos selecionar a opo DIV (<div>) ou SPAN (<span>). importante notarmos que a opo padro a DIV; em Type, Region. Alm disso, tambm podemos selecionar a opo Detail Region. Esta opo utilizada somente quando se faz necessrio a ligao de dados que atualiza quando outro dado for atualizado em um outro b. No menu Spry Data Set so listado todos os Spry XML Data Set definidos na pgina em questo. Podemos selecionar o que desejarmos utilizar. Na opo Insert h duas opes: Wrap selecion e Replace selection. Ambas estaro disponveis se ns, primeiramente, selecionarmos algum elemento no Document window. A primeira opo engloba o elemento selecionado com o Spry Region e a segunda substitui o elemento selecionado pelo Spry Region. O resultado do recurso Spry Region no Dreamweaver CS3 no Code e Design View demonstrado nas ilustraes abaixo, respectivamente.
90
Spry Region no modo de visualizao Code View
Spry Region no modo de visualizao Design View
Se desejarmos relacionar um Spry Region com mais de um Spry XML Data Set, simplesmente, precisamos listar os nomes desejados, separando-os por espaos, no valor do atributo "spry:region". Vejamos o exemplo abaixo com dois Spry XML Data Set definidos em um Spry Region:
<div spry:region="ds1 ds2">
Uma vez que j definimos o Spry Region, podemos arrastar e soltar os elementos do Spry XML Data Set listados no painel Bindings (Ctrl + F10) dentro da rea do Spry Region. Vejamso o exemplo abaixo:
Spry Region com o contedo a ser exibido definido
Neste caso vemos que o formato utilizado o seguinte: {nomeDeUmElementoNoSpryXMLDataSet}, o que na verdade uma
91
abreviao de {SpryXMLDataSet::nomeDeUmElementoNoSpryXMLDataSet}. importante prestarmos ateno aos dois pontos (::). Por exemplo, {ds1::title} que pode ser simplificado por {title}, uma vez que o Spry Region j est definindo que o Spry XML Data Set a ser utilizado ser o ds1. Agora vamos imaginar que desejamos exibir dados de um Spry XML Data Set em um Spry Region que no foi definido para exibir os dados do referido Spry XML Data Set. Neste caso, no poderemos utilizar a forma abreviada. Vejamos o exemplo abaixo para ficar mais claro:
<div spry:region="ds1">{title} por {author}</div> <div spry:region="ds2">{ds1::title} por {ds1::author}</div>
Se observarmos bem a imagem acima, podemos perceber que o {title} est com o visual de um link. Para definirmos links utilizando Spry XML Data Set, faamos o seguinte: vamos selecionar o item a ser linkado e em seguinda clicar no cone da "pastinha" ao lado do campo Link. Vejamos:
cone da "pastinha" prximo ao campo Link
Ao clicar em tal cone, teremos o painel Select File que dever ser configurado como demonstrado na imagem abaixo:
92
Select File configurado para a criao de um link dinmico
No painel demonstrado acima, devemos selecionar a opo Data Sources em Select file name from para que sejam exibidas as opes dos Spry XML Data Set presentes na pgina. Em seguida, no painel Field, devemos selecionar o elemento que ter o valor que ser utilizado como link. Simples, n? Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-region-example.htm.
Spry Repeat
Aps a insero do Spry Region, o qual define uma rea como sendo dinmica, podemos utilizar o Spry Repeat. Com o Spry Repeat desenvolvemos um mecanismo de loop entre os dados de um determinado Spry XML Data Set que ir se repetir e exibir os dados enquanto houver itens a serem exibidos.
93
O recurso Spry Repeat est localizado em duas abas na Insert bar, na aba Data e Spry, como podemos ver nas imagens abaixo:
Spry Repeat na aba Data
Spry Repeat na aba Spry
Para facilitar a demonstrao da funcionalidade de tal recurso, poderemos utilizar a pgina spry-repeat-example.htm localizada na pasta demos deste curso, na qual iremos aplicar o Spry Repeat. Uma vez com a pgina aberta - ou alguma outra semelhante -, precisamos selecionar o contedo que est dentro do Spry Region. Logo aps, vamos assistir ao vdeo explicativo abaixo que ir nos ensinar a configurar o Spry Repeat.
94
ConsideraessobreoSpryRepeat
Se tentarmos criar um Spry Region sem antes ter criado um Spry XML Data Set veremos que no possvel, uma vez que o Spry Region depende de um Spry XML Data Set definido na pgina em questo. O Dreamweaver exibe o painel Insert Spry Repeat com as definies padro j selecionadas, ou seja, em Container (recipiente) podemos selecionar a opo DIV <div> ou SPAN <span>. A opo padro a DIV. Em Type, a opo padro Repeat. Alm disso tambm podemos selecionar a opo Repeat children. Esta opo utilizada para a validao dos dados ocorrer em um nvel filho e bem til quando queremos utilizar expresses condicionais no cdigo. No menu Spry Data Set so listado todos os Spry XML Data Set definidos na pgina em questo. Podemos selecionar o que desejarmos utilizar. Na opo Insert h duas opes: Wrap selecion e Replace selection. Ambas estaro disponveis se ns, primeiramente, selecionarmos algum elemento no Document window. A primeira opo engloba o elemento selecionado com o Spry Repeat e a segunda substitui o elemento selecionado pelo Spry Repeat. O resultado do recurso Spry Repeat no Dreamweaver CS3 no modo de visualizao Code View pode ser visto na ilustrao abaixo:
Spry Repeat no modo de visualizao Code View
Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-repeat-example.htm ou spry-repeat-examplefinalizado.htm
95
Spry Repeat List

O Spry Repeat List um recurso que simplifica a criao de listas utilizando um Spry XML Data Set. Estas listas podem ser do tipo ordenada, no ordenada, lista de definio ou um elemento de formulrio do tipo select. O nico requisito para criar um Spry Repeat List ter definido um Spry XML Data Set, visto que que o Spry Repeat List cria automaticamente um Spry Region e um Spry Repeat. O recurso Spry Repeat List est localizado em duas abas na Insert bar, na aba Data e Spry, como podemos ver nas imagens abaixo:
Spry Repeat List na aba Data
Spry Repeat List na aba Spry
Agora vamos abrir a pgina spry-repeat-list-example.htm localizada na pasta demos deste curso. Nela h um Spry XML Data Set j definido. Com essa pgina aberta - ou com alguma outra nos mesmos moldes - vamos acessar o recurso Spry Repeat List demonstrado nas ilustraes acima. Em seguida vamos assistir ao vdeo explicativo abaixo que ir nos ensinar a configurar o Spry Repeat List.
96
ConsideraessobreoSpryRepeatList
Como dito anteriormente, podemos criar quatro tipo de listas utilizando o Spry Repeat List, so elas: List no ordenada (UL); Lista ordenada (OL); Lista de definio (DL); e lista utilizando um elemento de formulrio do tipo select (SELECT, Drop-down List). Nestes casos, o painel Insert Spry Repeat List se adequar mediante a escolha do tipo de lista que fizermos. No menu Spry Data Set so listado todos os Spry XML Data Set definidos na pgina em questo. Podemos selecionar o que desejarmos utilizar. No vdeo explicativo exibido acima utilizamos uma lista de definio, portanto, o painel Insert Spry Repeat List exibiu as opes DT Column e DD Column. So nestas opes que iremos iremos selecionar o item do Spry XML Data Set que ser utilizado para o ttulo e descrio da lista, respectivamente. O resultado de uma lista de definio criada pelo Spry Repeat List no Dreamweaver CS3 no modo de visualizao Code e Design View pode ser visto, respectivamente, nas ilustraes abaixo:
Spry Repeat List no modo de visualizao Code View
97
Spry Repeat List no modo de visualizao Design View
Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-repeat-list-example.htm ou spry-repeat-list-examplefinalizado.htm
Spry Table
Com o Spry Table podemos criar uma exibio de dados de um Spry XML Data Set em uma tabela HTML. Nesta, se desejado, podemos adicionar uma opo de ordenar os dados de uma determinada coluna, utilizar classes CSS afim de estilizar vrios elementos e estados das linhas da tabela. O nico requisito para criar um Spry Table ter definido um Spry XML Data Set. O recurso Spry Table est localizado em duas abas na Insert bar, na aba Data e Spry, como podemos ver nas imagens abaixo:
Spry Table na aba Data
Spry Table na aba Spry
98
Agora vamos abrir a pgina spry-table-example.htm localizada na pasta demos deste curso, onde h um Spry XML Data Set j definido. Com a referida pgina aberta - ou com alguma outra nos mesmo moldes - vamos acessar o recurso Spry Table demonstrado nas ilustraes acima. Logo aps, vamos assistir ao vdeo explicativo abaixo que ir nos ensinar a configurar o Spry Table.
ConsideraessobreoSpryTable
Como podemos perceber no vdeo explicativo acima, configurar o Spry Table super intutitivo. Entretanto, vamos analisar os elementos a serem configurados nesse recurso. A primeira coisa que devemos fazer informar qual o Spry XML Data Set ser utilizado, no exemplo, ds1. Uma vez informado o Spry XML Data Set, o painel Columns exibir os itens de tal Data Set. Neste painel podemos remover, incluir e reorganizar a ordem de aparecimento dos itens, como demonstrado no vdeo explicativo.
99
Se marcarmos a opo Sort column when header is clicked o Spry se encarregar de ordenar os dados da referida coluna quando seu cabealho for clicado. Em seguida, temos a opo de definir algumas classes CSS para serem utilizadas na estilizao de linhas mpares ou pares e os eventos ocasionados pelo usurio sobre a tabela. Por exemplo, passar o mouse sobre as linhas ou clicar sobre elas. O resultado de uma Spry Table criada pelo Dreamweaver CS3 no modo de visualizao Code ou Design View pode ser visto, respectivamente, na ilustrao abaixo:
Spry Table no modo de visualizao Code View
Spry Table no modo de visualizao Design View
Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-table-example.htm ou spry-table-examplefinalizado.htm
100
Spry Effects: Appear/Fade

Os recursos do Spry Effects so utilizados para enriquecer visualmente um elemento HTML. Estes efeitos podem ser aplicados em quase todos os elementos HTML. O Effect Appear e Fade faz com que um elemento aparea ou desaparea da interface, se utilizando de sua opacidade. Para ambos os recursos, Appear e Fade, podemos utilizar dois elementos HTML: um para acionar o efeito e outro para receber o enriquecimento visual. Dessa forma, vamos criar a seguinte marcao HTML. Vejamos o exemplo na imagem abaixo:
Exemplo de marcao para aplicar o efeito Appear e Fade
No exemplo acima, a tag <div> com o ID box_imasters ser o elemento HTML que receber o efeito. J o link posterior a ela ser o responsvel em acionar o efeito. Com a marcao HTML finalizada, vamos selecionar o referido link, a tag <a>, no Tag selector e em seguida acessar o painel Behaviors - agrupado junto ao painel Tag Inspector, ou acessado via tecla de atalho: Shift + F4. No painel Behaviors (Shift + F4) vamos escolher a opo Appear/Fade no menu Effects, como podemos ver na imagem abaixo:
101
Opo Appear/Fade no menu Effects do painel Behaviors
Escolhida a opo, teremos o painel Appear/Fade, o qual ser demonstrado com suas configuraes no vdeo explicativo abaixo:
ConsideraessobreoSpryEffects:Appear/Fade
As configuraes dos recursos do Spry Effects so simples. Vamos compreendlas.
102
A primeira coisa que temos que ter em mente informar em qual elemento o efeito ser aplicado atravs do menu Target Element. Neste menu, exibida a tag seguida do ID relativo ela, neste exemplo a div "box_imasters". Em seguida precisamos definir a configurao Effect duration, ou seja, a durao do efeito. O tempo dessa durao informado em milissegundos - que corresponde milsima parte do segundo. Por exemplo, 1000 milissegundos igual a 1 segundo. No menu Effect, devemos selecionar o efeito que ser aplicado no elemento alvo. Neste caso as opes so: Appear e Fade. Com a primeira o elemento ir aparecer e com a segunda, ir desaparecer. Como nosso elemento j est visvel, vamos escolher a opo Fade. As opes Fade from e Fade to indicam o mximo de opacidade do elemento que dever ser utilizada no decorrer do efeito. Por exemplo, em Fade from vamos informar 100%, o que significa dizer que o efeito iniciar com a opacidade total do elemento e terminar, em Fade to, com 0% de opacidade. Esse o segredo para desaparecer um elemento na interface via opacidade. Se marcarmos o checkbox da opo Toggle effect, estaremos dizendo ao Spry Effects Appear/Fade que o efeito dever ser reversvel. Isto , indo de Fade para Appear e Appear para Fade atravs de clicks sucessivos no elemento responsvel em adicionar o efeito. Se selecionarmos novamente o elemento HTML responsvel em acionar o efeito, o painel Behaviors listar o comportamento relacionado a ele, como podemos ver na imagem abaixo:
Painel Behaviors listando o efeito relacionado ao elemento selecionado
103
importante observarmos que o efeito ser acionado atravs do evento onclick, ou seja, quando o elemento for clicado. Alm disso, existem tambm vrios outros tipos de eventos. Ao lado de cada evento h o nome do efeito Appear/Fade que ao receber dois cliques, abrir o painel referente a ele, para que sejam alteradas as configuraes j realizadas. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-effects-appear-fade-example.htm.
Spry Effects: Grown/Shrink

Os recursos do Spry Effects so utilizados para enriquecer visualmente um elemento HTML. Esses efeitos podem ser aplicados em quase todos os elementos HTML. O Effect Grown e Shrink um tipo de efeito que aumenta e diminui o tamanho do elemento, respectivamente. Para ambos os recursos, Grown e Shrink, podemos utilizar dois elementos HTML: um para acionar o efeito e outro para receber o enriquecimento visual. Dessa forma, vamos criar a seguinte marcao HTML. Vejamos o exemplo na imagem abaixo:
Exemplo de marcao para aplicar o efeito Grown e Shrink
No exemplo acima, a tag <div> com o ID box_imasters ser o elemento HTML que receber o efeito. J o link posterior a ela, ser o responsvel em acionar o efeito.
104
Com a marcao HTML finalizada, vamos selecionar o referido link, a tag <a>, no Tag selector e em seguida acessar o painel Behaviors - agrupado junto ao painel Tag Inspector, ou acessado via tecla de atalho Shift + F4. No painel Behaviors (Shift + F4) vamos escolher a opo Grown/Shrink no menu Effects, como podemos ver na imagem abaixo:
Opo Grown/Shrink no menu Effects do painel Behaviors
Escolhida a opo, teremos o painel Grown/Shrink, o qual ser demonstrado com suas configuraes no vdeo explicativo abaixo:
105
ConsideraessobreoSpryEffects:GrowneShrink
As configuraes dos recursos do Spry Effects so simples. Vamos compreendlas. O que primeiramente temos que informar em qual elemento o efeito ser aplicado atravs do menu Target Element. Em tal menu, exibido a tag seguida do ID relativo ela, neste exemplo div "box_imasters". Em seguida, precisamos definir a configurao Effect duration, ou seja, a durao do efeito. O tempo dessa durao informado em milissegundos - que corresponde milsima parte do segundo. Por exemplo, 1000 milissegundos igual a 1 segundo. No menu Effect, vamos selecionar o efeito que ser aplicado no elemento alvo. Neste caso, as opes so Grown e Shrink. Com a primeira, o elemento ir crescer e com a segunda, ir diminuir. Como nosso elemento est "grande", vamos escolher a opo Shrink. As opes Shrink from e Shrink to (1), indicam o mximo do tamanho do elemento que dever ser utilizado no decorrer do efeito. Por exemplo, em Shrink from vamos informar 100%, o que significa dizer que o efeito utilizar do tamanho total do elemento e, terminar, em Shrink to (1), em 0% de seu tamanho. Esse o segredo para diminuir o elemento na interface atravs do seu prprio tamanho. A opo Shrink to (2) oferece as seguintes opes: Top Left Corner e Center. Com a primeira o elemento ir diminuir (ou crescer) a partir do canto
106
superior esquerdo da pgina. J com a segunda ele ir crescer (ou diminuir) a partir do centro da tela. Ao marcar o checkbox da opo Toggle effect, estamos dizendo ao Spry Effectss Grown/Shrink que o efeito dever ser reversvel, isto , indo de Shrink para Grown e Grown para Shrink, atravs de cliques sucessivos no elemento responsvel em adicionar o efeito. Se selecionarmos novamente o elemento HTML responsvel em acionar o efeito, o painel Behaviors listar o comportamento relacionado a ele, como podemos ver na imagem abaixo:
importante observarmos que o efeito ser acionado atravs do evento onclick, ou seja, quando o elemento for clicado. Alm disso, existem tambm vrios outros tipos de eventos. Ao lado do evento, h o nome do efeito Grown/Shrink que ao receber dois cliques, abrir o painel referente a ele, para que sejam alteradas as configuraes j realizadas. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-effects-grown-shrink-example.htm.
Spry Effects: Highlight

Os recursos do Spry Effects so utilizados para enriquecer visualmente um elemento HTML. Esses efeitos podem ser aplicados em quase todos os elementos HTML.
107
O Effect Highlight utilizado para alterar a cor de fundo de um elemento, com o intuito de realar tal informao. Para utilizar este recurso, utilizaremos dois elementos HTML: um para acionar o efeito e outro para receber o enriquecimento visual. Dessa forma, vamos criar a seguinte marcao HTML. Vejamos o exemplo na imagem abaixo:
Exemplo de marcao para aplicar o efeito Highlight
No exemplo acima, a tag <div> com o ID box_imasters ser o elemento HTML que receber o efeito. J o link posterior a ela, ser o responsvel em acionar o efeito. Com a marcao HTML finalizada, vamos selecionar o referido link, a tag <a>, no Tag selector e em seguida acessar o painel Behaviors - agrupado junto ao painel Tag Inspector, ou acessado via tecla de atalho Shift + F4. No painel Behaviors (Shift + F4) vamos escolher a opo Highlight no menu Effects, como podemos ver na imagem abaixo:
108
Opo Highlight no menu Effects do painel Behaviors
Escolhida a opo, teremos o painel Highlight, o qual ser demonstrado com suas configuraes na imagem abaixo:
Painel Hightight configurado
109
ConsideraessobreoSpryEffects:Highlight
Temos que ter me mente que a primeira coisa a informar em qual elemento o efeito ser aplicado atravs do menu Target Element. Em tal menu, exibida a tag seguida do ID relativo ela, neste exemplo div "box_imasters". Em seguida, precisamos definir a configurao Effect duration, ou seja, a durao do efeito. O tempo dessa durao informado em milissegundos - que corresponde milsima parte do segundo. Por exemplo, 1000 milissegundos igual a 1 segundo. Em Start Color, vamos selecionar uma cor inicial para o efeito e na opo End Color, uma cor final. Com essas informaes o Spry Effect Highlight ir colocar vrias cores como cor de fundo no elemento informado, cores essas que estaro entre a cor inicial e final. A opo Color After Effect bem sugestiva, ou seja, nela vamos informar a cor de fundo que o elemento ter quando o efeito for concludo. Ao marcar o checkbox da opo Toggle effect, estamos dizendo ao Spry Effects Highlight que o efeito dever ser reversvel. Isto , indo da cor inicial a final e da cor final a inicial, atravs de cliques sucessivos no elemento responsvel em adicionar o efeito. Ao selecionar novamente o elemento HTML responsvel em acionar o efeito, o painel Behaviors listar o comportamento relacionado a ele, como podemos ver na imagem abaixo:
110
importante observarmos que o efeito ser acionado atravs do evento onclick, ou seja, quando o elemento for clicado. Alm disso, existem tambm vrios outros tipos de eventos. Ao lado de cada evento, h o nome do efeito Highlight que ao receber dois cliques, abrir o painel referente a ele, para que sejam alteradas as configuraes j realizadas. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-effects-highlight-example.htm.
Spry Effects: Shake

Os recursos do Spry Effects so utilizados para enriquecer visualmente um elemento HTML. Esses efeitos podem ser aplicados em quase todos os elementos HTML. O Effect Shake utilizado para sacudir um elemento para a esquerda e para direita sucessivamente dentro de um perodo determinado de tempo. Para utilizar este recurso, utilizaremos dois elementos HTML: um para acionar o efeito e outro para receber o enriquecimento visual. Dessa forma, vamos criar a seguinte marcao HTML. Vejamos o exemplo na imagem abaixo:
Exemplo de marcao para aplicar o efeito Shake
No exemplo acima, a tag <div> com o ID box_imasters ser o elemento HTML que receber o efeito. J o link posterior a ela, ser o responsvel em acionar o efeito.
111
Com a marcao HTML finalizada, vamos selecionar o referido link, a tag <a>, no Tag selector e em seguida acessar o painel Behaviors - agrupado junto ao painel Tag Inspector, ou acessado via tecla de atalho Shift + F4. No painel Behaviors (Shift + F4) vamos escolher a opo Shake no menu Effects, como podemos observar na imagem abaixo:
Opo Shake no menu Effects do painel Behaviors
Escolhida a opo, teremos o painel Shake, o qual demonstrado com suas configuraes na imagem abaixo:
Painel Shake configurado
112
ConsideraessobreoSpryEffects:Shake
Primeiramente temos que informar em qual elemento o efeito ser aplicado atravs do menu Target Element. Em tal menu, exibida a tag seguida do ID relativo ela, neste exemplo div "box_imasters". Somente. Ao selecionar novamente o elemento HTML responsvel em acionar o efeito, o painel Behaviors listar o comportamento relacionado a ele, como podemos ver na imagem abaixo:
importante observarmos que o efeito ser acionado atravs do evento onclick, ou seja, quando o elemento for clicado. Alm disso, existem tambm vrios outros tipos de eventos. Ao lado de cada evento, h o nome do efeito Shake que ao receber dois cliques, abrir o painel referente a ele, para que sejam alteradas as configuraes j realizadas. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-effects-shake-example.htm.
Spry Effects: Slide Up/Slide Down

Os recursos do Spry Effects so utilizados para enriquecer visualmente um elemento HTML. Esses efeitos podem ser aplicados em quase todos os elementos HTML.
113
O Effect Slide Up/Slide Down um tipo de efeito que move um elemento para cima ou para baixo, respectivamente. Para ambos os recursos, Slide Up e Slide Down, podemos utilizar dois elementos HTML: um para acionar o efeito e outro para receber o enriquecimento visual. Dessa forma, vamos criar a seguinte marcao HTML. Vejamos o exemplo na imagem abaixo:
Exemplo de marcao para aplicar o efeito Slide Up/Slide Down
No exemplo acima, a tag <div> com o ID box_imasters ser o elemento HTML que receber o efeito. Devemos prestar ateno na incluso de outra tag <div>, sem ela, o recurso no funciona como o esperado e o Dreamweaver tambm no adiciona o cdigo na pgina. J o link posterior a ela, ser o responsvel em acionar o efeito. Com a marcao HTML finalizada, vamos selecionar o referido link, a tag <a>, no Tag selector e em seguida acesse o painel Behaviors - agrupado junto ao painel Tag Inspector, ou acessado via tecla de atalho Shift + F4. No painel Behaviors (Shift + F4) vamos escolher a opo Slide no menu Effects, como podemos observar na imagem abaixo:
114
Opo Slide no menu Effects do painel Behaviors
Escolhida a opo, teremos o painel Slide, o qual ser demonstrado com suas configuraes no vdeo explicativo abaixo:
ConsideraessobreoSpryEffects:SlideupeSlidedown
As configuraes dos recursos do Spry Effects so simples. Vamos compreendlas.
115
A primeira coisa que temos que fazer informar em qual elemento o efeito ser aplicado atravs do menu Target Element. Em tal menu, exibida a tag seguida do ID relativo ela, neste exemplo div "box_imasters". Em seguida, precisamos definir a configurao Effect duration, ou seja, a durao do efeito. O tempo dessa durao informado em milissegundos - que corresponde milsima parte do segundo. Por exemplo, 1000 milissegundos igual a 1 segundo. No menu Effect, vamos selecionar o efeito que ser aplicado no elemento alvo. Neste caso, as opes so: Slide up e Slide down. Com a primeira, o elemento ir deslizar para cima e com a segunda, ele ir deslizar para baixo. As opes Slide up from e Slide up to, indicam o mximo do tamanho do elemento que dever ser utilizada no decorrer do efeito. Por exemplo, em Slide up from informarmos 100%, o que significa dizer que o efeito utilizar do tamanho total do elemento e, terminar, em Slide up to, em 0% de seu tamanho. Esse o segredo para simular um elemento deslizando na interface atravs do seu prprio tamanho. Ao marcar o checkbox da opo Toggle effect, estamos dizendo ao Spry Effects Slide Up/Slide Down que o efeito dever ser reversvel. Isto , indo de Slide up para Slide down e Slide down para Slide up, atravs de cliques sucessivos no elemento responsvel em adicionar o efeito. Ao selecionar novamente o elemento HTML responsvel em acionar o efeito, o painel Behaviors listar o comportamento relacionado a ele, como podemos ver na imagem abaixo:
116
importante observarmos o efeito ser acionado atravs do evento onclick, ou seja, quando o elemento for clicado. Alm disso, existem tambm vrios outros tipos de eventos. Ao lado de cada evento, h o nome do efeito Slide que ao receber dois cliques, abrir o painel referente a ele, para que sejam alteradas as configuraes j realizadas. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-effects-slide-example.htm.
Spry Effects: Squish

Os recursos do Spry Effects so utilizados para enriquecer visualmente um elemento HTML. Esses efeitos podem ser aplicados em quase todos os elementos HTML. O Effect Squish desaparece com o elemento desejado em direo ao canto superior esquerdo da pgina. Para utilizar este recurso, utilizaremos dois elementos HTML: um para acionar o efeito e outro para receber o enriquecimento visual. Dessa forma, vamos criar a seguinte marcao HTML. Vejamos o exemplo na imagem abaixo:
Exemplo de marcao para aplicar o efeito Squish
No exemplo acima, a tag <div> com o ID box_imasters ser o elemento HTML que receber o efeito. J o link posterior a ela, ser o responsvel em acionar o efeito. Com a marcao HTML finalizada, selecione o referido link, a tag <a>, no Tag selector e em seguida acesse o painel Behaviors - agrupado junto ao painel Tag Inspector, ou acessado via tecla de atalho Shift + F4.
117
No painel Behaviors (Shift + F4) vamos escolher a opo Squish no menu Effects, como podemos observar na imagem abaixo:
Opo Squish no menu Effects do painel Behaviors
Escolhida a opo, teremos o painel Squish, o qual ser demonstrado com suas configuraes na imagem abaixo:
Painel Squish configurado
ConsideraessobreoSpryEffects:Squish
O que devemos fazer em primeiro lugar informar em qual elemento o efeito ser aplicado atravs do menu Target Element. Em tal menu, exibida a tag seguida do ID relativo ela, neste exemplo div "box_imasters". Somente.
118
Embora o painel Squish no oferea a opo de Toggle effect, tal opo oferecida por padro pelo referido efeito. Ao selecionar novamente o elemento HTML responsvel em acionar o efeito, o painel Behaviors listar o comportamento relacionado a ele, como podemos observar na imagem abaixo:
importante observarmos que o efeito ser acionado atravs do evento onclick, ou seja, quando o elemento for clicado. Alem disso, existem tambm vrios outros tipos de eventos. Ao lado de cada evento, h o nome do efeito Squish que ao receber dois cliques, abrir o painel referente a ele, para que sejam alteradas as configuraes j realizadas. Nota: a pgina de exemplo utilizada nesta explicao est localizada na pgina demos como o nome spry-effects-squish-example.htm.
Parabns
Voc acabou de concluir o iMasters Adobe Dreamweaver CS3 o qual teve a inteno de mostrar-lhe os novos recursos da verso CS3 do Dreamweaver. Como autor procurei utilizar minhas experincias em programao e desenvolvimento para Web para explicar, da melhor forma possvel, as novas funcionalidades e recursos da verso CS3 do Dreamweaver. Espero sinceramente que tenha consigo alcanar esse objetivo. Como dica, fique atento novidades sobre o Dreamweaver e desenvolvimento web em geral atravs do iMasters, o maior portal de TI do Brasil, atravs da minha coluna - Leandro Vieira - e de outros colunista do portal.
119
Estou a disposio para ajud-los no que for possvel atravs do email suporte@leandrovieira.com.
Leandro Vieira no iMasters Seo de Dreamweaver do iMasters
Alm disso, no perca a oportunidade de conferir os outros cursos que desenvolvi para o iMasters. Abaixo seguem suas descries e links para acesso.
Outras publicaes de Leandro Vieira Dreamweaver + PHP + MySQL Dividido em 10 captulos, o Curso "Advanced And Interactive - Dreamweaver MX 2004" aborda o trabalho dirio de desenvolvimento integrando o Dreamweaver, o PHP e o MySQL. Web Sites com AJAX O curso "Web Sites com AJAX" aborda tudo sobre o Ajax, desde a sua introduo, ao projeto final. Os captulos so divididos em Javascript, DOM e DHTML, JavaScript no-obstrutivo, Ajax e o projeto final, em uma navegao fcil e dinmica.
Um grande abrao, Leandro Vieira
120

Curso Dreamweaver CS3

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Curso Dreamweaver CS3

Diunggah oleh

Hak Cipta:

Format Tersedia

Curso iMasters Adobe Dreamweaver CS3

Introduo ao Dreamweaver CS3

Modificaes na Interface do Dreamweaver CS3

Start Page do Dreamweaver 8

Start Page do Dreamweaver CS3

Painel New Document do Dreamweaver 8

Painel New Document do Dreamweaver CS3

Insert bar do Dreamweaver 8

Insert bar do Dreamweaver CS3

Painel Site definition do Dreamweaver 8

Painel Site definition do Dreamweaver CS3

Property inspector do Dreamweaver 8 com uma imagem selecionada no Document window

Coding bar do Dreamweaver 8

Coding bar do Dreamweaver CS3

Conhea o espao de trabalho do Dreamweaver CS3

Espao de trabalho do Dreamweaver CS3 - Modo Designer

Conhea o painel New Document do Dreamweaver CS3

Painel New Document do Dreamweaver CS3

Boto Attach Style Sheet no painel New Documento do Dreamweaver CS3

Painel Attach External Style Sheet

O processo de criao de configurao de um arquivo finalizado ao clicar no boto Create. Vejamos:

Boto Create no painel New Document do Dreamweaver CS3

Browser Compatibility Check (BCC)

Seta verde localizada no canto superior esquerdo da aba BCC

Painel Target Browsers

Opo Settings... da Check Page na Document toolbar

Opo Check Browser Compatibility da Check Page na Document toolbar

Opo Check Browser Compatibility na aba BCC do painel Results

Resultado da validao do BCC no painel Results na aba BCC

Adobe CSS Advisor Beta

Inteno dos Layouts CSS no Dreamweaver CS3

Tipos de Layouts CSS

Compreendendo e utilizando os Layouts CSS do Dreamweaver CS3

Classe CSS selecionada juntamente com o espao posterior ela

Localizao da opo Find and Replace no menu Edit

Aberto o painel, precisamos configur-lo, como exemplificado na imagem abaixo:

Painel Find and Replace configurado

Opo None do menu Set Class

Como os Layouts CSS so representados no Dreamweaver CS3

Painel New Document e a representao de um tipo de layout CSS

Representao de um layout do tipo Elastic

Representao de um layout do tipo Fixed

Representao de um layout do tipo Liquid

Representao de um layout do tipo Hibrid

Sobre os comentrios nas declaraes CSS

Declaraes CSS comentadas

Tag <div> utilizada como recipiente

As declaraes CSS utilizadas para essa tag so as seguintes:

Propriedade width e margin no seletor #container

Ilustrao do resultado do efeito das propriedades CSS utilizadas

Ilustrao do layout no IE 5.x para Windows

Propriedade text-align no seletor body

Ilustrao do layout com a propriedade text-align e valor center no seletor body

Propriedade text-align no seletor #container

E finalmente, o resultado esperado em todos os navegadores:

Ilustrao do resultado do efeito das propriedades CSS utilizadas

Como mover declaraes CSS entre arquivos

Como mover declaraes CSS inline

<h1 style="color:#FF0000; border-bottom: 2px solid #FF0000">Header</h1>

Convert Inline CSS to Rule... na Coding toolbar

Opo Convert Inline CSS to Rule... no Tag selector

Como mover declaraes CSS para um arquivo externo