Curso imasters Adobe Dreamweaver CS3

Transcrição

1 Curso imasters Adobe Dreamweaver CS3 O Dia 27 de Março de 2007 foi marcado pelo lançamento da Adobe Creative Suite 3. Entre os integrantes dessa novidade está a nova versão do Dreamweaver: o Adobe Dreamweaver CS3. E como não 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 versão Adobe Dreamweaver CS3. Esta versão 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 navegação) foram utilizandas as novas funcionalidades presentes nesta versão do programa, tudo realizado de forma simples, rápida e fácil. Sendo mais específico, o desenvolvimento foi realizado em duas partes: primeiramente criei um layout com duas colunas, lateral na esquerda e cabeçalho e rodapé (2 column fixed, left sidebar, header and footer). Para isso, foram necessários alguns cliques e pequenas modificações no arquivo CSS referente ao layout, uma vez que precisei adequar o layout à minha necessidade. E por último projetei a navegação. Criei apenas um arquivo XML onde especifiquei os títulos e os links de cada página. Isto me permitiu organizar, ordenar e pensar melhor a respeito sobre a posição de cada item do menu. Quando foi necessário alguma alteração, ao invés de alterar todas as páginas 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 - responsável por ler o arquivo XML e gerar os títulos e links especificados no arquivo - e para finalizar utilizei o Spry Accordion para compor o visual e os efeitos do menu. Como visto, fiz questão que todos os recursos deste curso fossem desenvolvidos utilizando as novidades do Dreamweaver CS3 para que você possa perceber, de forma prática, um pouco das possibilidades de uso dos novos recuros desta versão do Dreamweaver. 1

2 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 páginas seguintes que integram este curso, e no portal imasters, onde estou sempre publicando novos artigos sobre Dreamweaver e Desenvolvimento Web em geral. Um forte abraço! Introdução ao Dreamweaver CS3 A nova versão do Dreamweaver, a CS3, está recheada de novas funcionalidades que foram criadas para atenderem às novas exigências dos programadores e designers para desenvolvimento web. No decorrer deste curso veremos as principais novidades da versão e nesta unidade faremos uma breve introdução a todas elas. A interface A estrutura da interface é a mesma das versões anteriores do Dreamweaver, exceto por algumas modificações que foram realizadas com o intuito de acomodar os novos recursos da versão CS3. Veremos no próximo capítulo tais modificações. Spry A grande novidade da versão CS3 é o suporte do Dreamweaver à metodologia Ajax através do framework Spry. Este é composto por arquivos JavaScript e CSS que são utilizados no desenvolvimento de interfaces mais ricas e dinâmicas, além possibilitarem integrar dados no formato XML às páginas 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 básicos de HTML, CSS e JavaScript, uma vez que o trabalho árduo de configuração foi facilitado pela interface do Dreamweaver CS3. 2

3 Melhoria no suporte a CSS O Dreamweaver CS3 valorizou o trabalho com layouts em CSS, além de oferecer um melhor suporte a esse tipo de estilização de páginas. Em sua atualização para a versão atual, foi disponibilizada uma quantidade considerável de layouts CSS e cada um desses layouts vem com extensivos e completos comentários a respeito de cada declaração CSS utilizada. O novo painel CSS Styles ficou super interessante, funcional e focado em importantes facilidades. Agora, poderemos mover as CSS de várias 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. Através do CSS Advisor website poderemos encontrar soluções para os bugs de navegadores específicos (em se tratando de CSS), sendo tais soluções postadas pelos membros dessa comunidade. Há dicas interessantes e importantes por lá. Conhecer e, principalmente, compreender essas dúvidas é importante e evolui o conhecimento e experiência no desenvolvimento com CSS. Browser Compatibility Check (BCC) Com essa ferramenta é possível verificar a compatibilidade da página entre os vários navegadores e assim economizar tempo na realização de testes de compatibilidade e renderização. Com o Browser Capatibility Check você poderá ter a certeza que a visualização da página será consistente entre os mais populares navegadores e sistemas operacionais e o mais interessante é que toda essa verificação é feita na própria interface do Dreamweaver. XML fácil e sem esforço 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, é possível integrar os dados na página arrastando-os e soltando-os no local desejado. Sobre as demais novidades, poderemos conferí-las nas unidades seguintes. Até lá. 3

4 Modificações na Interface do Dreamweaver CS3 Nesta unidade faremos comparações entre algumas partes da interface do Dreamweaver 8 e do CS3. A estrutura básica de ambas interfaces é praticamente a mesma. Porém, na versão CS3 podemos notar algumas melhorias e modificações que foram realizadas com o intuito de acomodar os novos recursos desta versão. Vamos fazer um pequeno tour? Start Page (Página inicial) A Star Page da versão 8 e da CS3 é praticamente a mesma, exceto pela modificação no layout e na nova identidade visual desenvolvida para a CS3. Podemos observar as pequenas mudanças nas imagens abaixo: 4

5 Start Page do Dreamweaver 8 5

6 Start Page do Dreamweaver CS3 Painel New Document O painel New Document (Ctrl + N) utilizado para criar novos documentos no Dreamweaver foi reestruturado e também está de visual novo. Vejamos as diferenças visuais entre as duas versões: 6

7 Painel New Document do Dreamweaver 8 7

8 Painel New Document do Dreamweaver CS3 Agora falaremos a respeito do novo painel New Document e os recuros que foram adicionados a ele. Insert bar A Insert bar contém botões organizados por categorias e são utilizados na criação e inserção de elementos na página em questão, por exemplo: imagens, elementos de formulários, tabelas, entre outros. Categorias adicionais são exibidas quando documentos que contém códigos de servidor são abertos, por exemplo: documentos em PHP, Cold Fusion, entre outros. A grande diferença entre a Insert bar do Dreamweaver CS3 e a do Dreamweaver 8 foi a inclusão dos recursos do Spry nas categorias Layout, Forms e Data. Além da inclusão de uma nova categoria, a Spry. As diferenças podem ser observadas nas imagens abaixo: 8

9 Insert bar do Dreamweaver 8 Insert bar do Dreamweaver CS3 Painel Site Definition No painel Site Definition - utlizado na configuração de sites no Dreamweaver - foi incluida a categoria Spry, a qual permite determinar uma pasta específica para a inclusão dos arquivos relacionados ao Spry, conforme podemos observar nas imagens abaixo: Painel Site definition do Dreamweaver 8 9

10 Painel Site definition do Dreamweaver CS3 Edição de imagens no Property inspector Na versão 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 edição. Na versão CS3 o processo é o mesmo, porém a diferença fica por conta do programa que é aberto, que nesta versão é o Photoshop. Observemos abaixo: Property inspector do Dreamweaver 8 com uma imagem selecionada no Document window 10

11 Property inspector do Dreamweaver CS3 com uma imagem selecionada no Document window Coding bar A Coding bar - exibida somente no modo de visualização 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 diferenças entre a Coding bar da versão 8 e da versão CS3 do Dreamweaver. Coding bar do Dreamweaver 8 Coding bar do Dreamweaver CS3 11

12 Como citado anteriormente, a estrutura da interface de ambas as versões é praticamente a mesma, o que realmente mudou foi a inclusão e organização de alguns itens para acomodar os novos recursos inseridos na versão CS3. Conheça o espaço de trabalho do Dreamweaver CS3 Durante todo o curso falaremos várias vezes sobre as partes que compõe a interface do espaço de trabalho do Dreamweaver. Conhecer cada parte que compõe 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 introdução a estas partes para que possamos nos familiarizar com as mesmas. Espaço de trabalho do Dreamweaver CS3 - Modo Designer 12

13 Insert bar A Insert bar coloca à nossa disposição vários recursos que permitem inserir imagens, tabelas, formulários, entre outros recursos em nossos documentos. Os mesmos recursos também estão disponíveis através do menu Insert. Quando utilizamos alguma das opções da Insert bar o que ocorre na realidade é a inserção de fragmentos HTML com os atributos por você informados através da interface de cada recurso. Document toolbar A Document toolbar armazena opções referentes ao documento que está aberto na interface do Dreamweaver, permitindo alternar entre os modos de visualização do documento - Design View, Code View, Split View. Além disso, exibe várias outras opções como o título do documento, visualização da página no navegador de internet, entre outros. Document window O Document window exibe o arquivo aberto na interface do Dreamweaver. É nele que criaremos e editaremos nossas páginas. Panel groups O Panel groups são vários paineis agrupados e organizados sobre um tópico específico. Eles podem ser expandidos clicando na "setinha" à esquerda do nome de cada tópico do grupo. Para reorganizar a ordem em que os grupos são listados no Panel groups podemos clicar em um discreto ícone à esquerda da "setinha" e arrastar o painel para reorganizá-lo. 13

14 Tag selector 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 conteúdo. Property inspector 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 opções diferentes e são todas relativas a ele. Files panel O Files panel é utilizado para gerenciarmos os arquivos e pastas relativas ao projeto que estamos trabalhando, permitindo também acessar nossos arquivos locais, semelhante ao Windows Explorer. Conheça o painel New Document do Dreamweaver CS3 O painel New Document do Dreamweaver CS3 foi totalmente reestruturado. Agora está de visual novo e com vários recursos adicionais, como podemos observar na imagem abaixo: 14

15 Painel New Document do Dreamweaver CS3 O grande diferencial do referido painel é o foco nos layouts CSS. São vários modelos e tipos de layouts CSS que podem ser escolhidos, além da opção de informar o local em que as declarações CSS serão armazenadas. O procedimento para a criação de um documento continua sendo o mesmo, ou seja, escolhemos uma categoria, definimos o tipo da página na coluna Page Type e escolhemos como será o layout na coluna Layout. No entanto, se desejarmos criar uma página sem nenhuma estrutura de layout, podemos escolher opção <none> somente. Nos capítulos seguintes falaremos mais sobre os layouts CSS disponibilizados pelo Dreamweaver CS3. Na opção DocType informamos qual o tipo de DOCTYPE - uma tag utilizada para informar a versão do HTML usado na página - que será utilizado. Na opção Layout CSS existem três opções: Add to Head, Create New File e Link to Existing File. 15

16 Na primeira opção, as declarações CSS referentes ao layout escolhido serão dispostas no cabeçalho da página a ser criada. Na segunda opção, 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 serão dispostas as declarações CSS referentes ao layout escolhido. Já na terceira opção, se escolhida, indica que usaremos um arquivo CSS existente. Para informar qual arquivo é esse, é necessário usar o botão Attach Style Sheet. Vejamos a imagem abaixo: Botão Attach Style Sheet no painel New Documento do Dreamweaver CS3 Uma vez clicado no botão, teremos o painel Attach External Style Sheet como demonstrado na imagem abaixo: Painel Attach External Style Sheet 16

17 Nesse painel, na opção File/URL, selecionamos o arquivo CSS que será utilizado. Em Add escolhemos como o arquivo será aplicado na página, ou seja, se ele será linkado ou importando e em Media definimos o tipo de mídia referente ao arquivo. Ao deixar esse campo em branco, utilizaremos Media padrão 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 opção de excluí-lo através do botão Delete the selected file from the list, como demonstrado na imagem abaixo: Botão Delete file selected from the list no painel New Documento do Dreamweaver CS3 O processo de criação de configuração de um arquivo é finalizado ao clicar no botão Create. Vejamos: Botão Create no painel New Document do Dreamweaver CS3 Browser Compatibility Check (BCC) 17

18 O Browser Compatibility Check (BCC) nos ajudará a verificar se determinadas combinações de marcação HTML e estilos CSS podem causar algum tipo de problema em determinado navegador. Testar página por página de um site em vários navegadores de internet é necessário para verificar a compatibilidade da página entre eles, porém este é um trabalho em que dispendemos muito tempo. Na versão CS3 do Dreamweaver, com o Browser Compatibility Check, poderemos realizar esse árduo trabalho de forma simples e prática. Além da economia de tempo, teremos certeza que a visualização da página (renderização) será consistente entre os navegadores de internet e os sistemas operacionais. Por padrão, o BCC verifica a página 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, através 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 opção Settings... e em seguinda configuramos o painel Target Browsers selecionando a versão dos navegadores desejados. Vejamos a imagem abaixo: 18

19 Painel Target Browsers Na opção Settings... da Check Page na Document toolbar é possível também acessar a opção demonstrada acima. Observemos a imagem abaixo: Opção Settings... da Check Page na Document toolbar Para que seja efetuada a validação da página desejada, escolhemos a opção Check Browser Compatibility da Check Page na Document toolbar ou a mesma opção no Painel Results. Podemos observar ambas as opções, respectivamente, abaixo: 19

20 Opção Check Browser Compatibility da Check Page na Document toolbar Opção Check Browser Compatibility na aba BCC do painel Results O resultado da validação é exibido no painel Results na aba Browser Compatibility Check, como podemos ver no exemplo abaixo: Resultado da validação do BCC no painel Results na aba BCC 20

21 Adobe CSS Advisor Beta O Adobe CSS Advisor Beta é uma comunidade pública que foi desenvolvida com os seguintes propósitos: Permitir que possamos procurar por soluções sobre CSS e compatibilidade de navegadores de internet; Permitir que compartilhemos com toda a comunidade as soluções e os artifícios que descobrirmos; Comentar e melhorar as soluções já existentes; Como freqüentador, sugiro a você que acompanhe sempre essa comunidade. Acesse CSS Advisor beta e conheça-a. Obs: Até o momento em que escrevo esta página, há diversas soluções e explicações sobre bugs relacionados a propriedades CSS, como por exemplo: Background, Border, Position, Float, entre outras. Existem ainda soluções relacionadas a navegadores de internet como Internet Explorer, Mozilla/Firefox, Opera e Safari. Façam um bom proveito. 21

22 Intenção dos Layouts CSS no Dreamweaver CS3 O Dreamweaver a cada versão lançada vem adotando sistematicamente os padrões da web. O que justifica essa adoação por parte deste programa é a quantidade cada vez maior de designers e desenvolvedores web que estão adotando tais padrões. Um exemplo clássico dessa mudança é a migração de layouts baseadas em tabelas para layouts com Cascading Style Sheets (CSS). Dentre vários benefícios, a utilização da CSS faz com que o layout fique mais robusto, consistente e cross-browser. Entretanto, como são muitas as pessoas que não tem tempo para aprender todas as técnicas que envolvem esses processos, a dificuldade para entregar um trabalho com tais características aumentam. Nesse ponto entram as modificações da versão CS3 do Dreamweaver, as quais deixam à nossa disposição diversos layouts CSS que são criados com a facilidade de um click com o mouse, sendo comentada extensivamente cada declaração CSS utilizada. As opções de layout são variadas: páginas com uma, duas ou três colunas e cada uma delas com elementos adicionais, como por exemplo: cabeçalho (header), rodapé (footer), entre outros. Como dito anteriormente, um dos benefícios do layout CSS é sua consistência e a sua característica de ser cross-browser, o que significa que um layout, site, aplicação, recurso, entre outros, é suportado por vários navegadores de internet (browsers). Além disso, os layouts CSS disponibilizados foram escritos com o cuidado de evitar a utilização de hacks CSS para navegadores de internet específicos. Assim, os layouts CSS fornecidos pelo Dreamweaver CS3 são compatíveis 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

23 Tipos de Layouts CSS Além das opções de layouts com uma, duas ou três colunas e cada um deles com elementos adicionais - cabeçalho (header), rodapé (footer), entre outros - ainda podemos escolher o tipo de layout desejado. Os tipos disponíveis são os seguintes: Elastic layout (layout elástico) - Os valores de medida para o tamanho total do layout ou das colunas que o compõe são 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 agradável para usuários com problemas de visão, por exemplo. Uma vez que à medida que o tamanho de fonte é aumentado, as colunas ficam maiores e a leitura, conseqüentemente, mais confortável. Ao escolher essa opção, tenha em mente que esse layout deverá permitir uma largura variável. Fixed layout (layout fixo) - Os valores de medida para o tamanho total do layout ou das colunas que o compõe, são especificados através de unidades em pixels (px). Para tal opção, o layout é centralizado horizontalmente no navegador de internet do usuário. Liquid layout (layout líquido) - Os valores de medida para o tamanho total do layout ou das colunas que o compõe, são especificados com unidades em percentagem (%). A percentagem é calculada de acordo com o tamanho da janela do navegador de internet do usuário. Hybrid layout (layout híbrido) - Layouts híbridos são aqueles que combinam dois tipos de layouts: elástico e líquido. Desta forma, o valor de medida para o tamanho total do layout é medido em percentagem, sendo 100%. Entretanto, o valor das colunas que compõe o layout são definidas em unidades em (em). Absolutely Positioned layouts (Layouts posicionados absolutamente) - Este tipo de layout, como o próprio nome já diz, tem as colunas que o compõe 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 compreensão. Primeiramente vamos criar um layout CSS com duas colunas, do tipo fixo (fixed) e com cabeçalho (header) e rodapé (footer). Para isso, podemos fazê-lo através do painel New Document acessado no menu File > New... ou Ctrl + N. Vamos observar na imagem abaixo o painel New Document configurado: 23

24 Painel New Document com o tipo de layout: 2 colunas, fixo, cabeçalho e rodapé Vamos observar que na opção Layout CSS, podemos escolher Add to Head para que as declarações CSS fiquem dispostas no cabeçalho do página para facilitar a explicação. Uma vez criado o layout, vamos compreender alguns detalhes importantes: Se repararmos nas declarações CSS criadas para o referido layout, podemos observar que todos os seletores são precedidos de uma classe, neste caso, denominada como.twocolfixlthdr. Em todos os layouts a lógica será a mesma, sendo assim, vamos entender a lógica 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 são 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 página criada, como podemos observar no exemplo abaixo: 24

25 <body class="twocolfixlthdr"> O uso desse recurso, como citado, é para a utilização de diferentes layouts, por exemplo: duas e três 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 espaço posterior ao nome. Observemos o exemplo abaixo: Classe CSS selecionada juntamente com o espaço posterior à ela Agora, vamos abrir o painel Find and Replace através do menu Edit > Find and Replace... - ou com a tecla de atalho (Ctrl + F). Vejamos: 25

26 Localização da opção Find and Replace no menu Edit Aberto o painel, precisamos configurá-lo, como exemplificado na imagem abaixo: Painel Find and Replace configurado 26

27 Assim, definimos em Find in o documento (a página) em questão; em Search escolhemos Source Code para que a análise seja feita no código fonte somente. Em Find, o nome da classe normalmente já vem definido, uma vez que selecionamos o referido nome e após é aberto o painel Find and Replace. O que será feito com essas configurações é uma busca no código fonte da página por.twocolfixlfhdr e substituí-lo por nada, o que, na verdade, é a mesma coisa que removê-lo. Definidas as configurações necessárias e compreendido o que será feito, podemos clicar no botão Replace All e conferir o resultado. Agora que as declarações CSS não estão mais precedidas pela classe referente ao layout escolhido, podemos removê-la do seletor body na página. Para isso, primeiramente devemos selecionar a tag <body> através do Tag selector e depois clicar com o botão direito do mouse sobre ela e escolher a opção None no menu Set Class, como podemos observar na imagem abaixo: Opção None do menu Set Class 27

28 Como os Layouts CSS são 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 representação de um tipo de layout CSS Para cada tipo de layout CSS, o Dreamweaver utiliza um ícone para representálo. Vamos conhecê-los e ao mesmo tempo sabe qual layout eles representam. Representação de um layout do tipo Elastic 28

29 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 compõe, especificados com unidades em (em). Representação 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 compõe, especificados com unidades em pixels (px). Representação 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 compõe, especificados com unidades em percentagem (%). 29

30 Representação de um layout do tipo Hibrid A imagem acima ilustra layouts do tipo Hibrid, ou seja, layouts que combinam dois tipos de layouts: elástico e líquido. O tamanho total do layout é medido em percentagem, sendo 100%; mas o valor das colunas que compõe o layout são definidas em unidades em (em). Sobre os comentários nas declarações CSS Todas as declarações CSS utilizadas na criação dos layouts CSS disponibilizados pelo Dreamweaver foram exaustivamente comentadas, o que significa dizer que, além de facilitar a criação dos layouts com apenas alguns cliques do mouse, agora é possível compreendermos e aprender sobre as declarações CSS. Agora, ninguém terá mais desculpas para não utilizar layouts CSS. Entretanto, a única restrição dos comentários das declarações CSS é que eles foram escritos em inglês, assim, se você não domina tal idioma, planeje estudálo. Inglês é uma ferramenta de trabalho e estudo indispensável para um profissional web. Observemos na imagem abaixo um exemplo dos comentários sobre as declarações CSS de um layout: 30

31 Declarações 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 usuário. Vamos compreender como isso é possível? O primeiro passo é utilizar uma tag que englobe todo o conteúdo da página. Observemos a imagem abaixo: Tag <div> utilizada como recipiente 31

32 As declarações CSS utilizadas para essa tag são as seguintes: Propriedade width e margin no seletor #container O que essas declarações CSS fazem é determinar um tamanho máximo - width: 46em e utilizar a propriedade margin com o valor "0 auto", ou seja, margem zero para cima e para baixo e margem automática - determinada pelo navegador - para esquerda e direita. Para que compreendamos melhor como é determinada a margem automática, vamos considerar o seguinte exemplo: um usuário acessa uma página com uma resolução de 1024x768 e consideremos que o tamanho máximo determinado seja 750 pixels. Assim sendo, o navegador atribui 137 pixels de margem esquerda e direita. Entendeu? Não? Ok, vejamos a explicação abaixo: A resolução é 1024x768 e o tamanho da <div> que engloba todo o conteúdo da página é de 750px, certo? Bom, então 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: Ilustração do resultado do efeito das propriedades CSS utilizadas 32

33 Entretanto, se testarmos esse exemplo no Internet Explorer 5.x para Windows, veremos que o site vai estar alinhado à esquerda, como na imagem abaixo: Ilustração do layout no IE 5.x para Windows Isto ocorre por que o Internet Explorer 5.x para Windows não respeita o valor auto para as margens esquerda e direita. Mas não precisamos nos preocupar, existem um "remedinho" para esse problema. Observemos o "remedinho" no seletor body: Propriedade text-align no seletor body Agora o resultado: Ilustração do layout com a propriedade text-align e valor center no seletor body 33

34 Como podemos perceber na imagem acima, o Internet Explorer 5.x para Windows também interpreta a propriedade e o valor "text-align: center" erroneamente, ou seja, ele alinha os elementos da tag <div> que engloba o conteúdo da página. Para corrigirmos esse problema, basta aplicarmos uma declaração para a referida tag <div> que alinhe o texto à esquerda. A solução seria a seguinte: Propriedade text-align no seletor #container E finalmente, o resultado esperado em todos os navegadores: Ilustração do resultado do efeito das propriedades CSS utilizadas É importante notarmos que os layouts CSS disponibilizados pelo Dreamweaver CS3 foram planejados, testados e estão todos à nossa disposição, portanto, vamos utilizá-los sem moderação e assim também poderemos aprender mais com os comentários das declarações CSS. 34

35 Como mover declarações CSS entre arquivos Através do painel CSS Styles - Window > CSS Styles ou Shift + F11 - é possível mover declarações CSS de um arquivo para outro ou mover declarações CSS do cabeçalho da página para um arquivo ou vice-versa. O vídeo explicativo abaixo demonstra como é simples e fácil mover declarações CSS. Vejamos: Considerações sobre mover declarações CSS Como podemos perceber no vídeo explicativo acima, as declarações CSS foram movidas entre o cabeçalho da página em questão - <style> - e um arquivo CSS - foo-css.css - linkado à página. No painel CSS Styles são listadas todas as declarações contidas no arquivo ou na página. Para movermos as declarações CSS desejadas, as selecionamos e em seguida arrastamos para o local desejado. Este, pode ser um outro arquivo ou então o próprio arquivo, afim de organizar a ordem das declarações. Simples, não é? 35

36 Como mover declarações CSS inline As declarações CSS inline são aquelas que são declaradas em um elemento específico, sendo um tipo de declaração pouca produtiva, uma vez que ela é composta por apenas um elemento somente. Mover tal declaração para o cabeçalho da página ou para um arquivo CSS externo aumenta a produtividade da declaração 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 página sejam estilizados como o do exemplo é preciso repetir a mesma declaração CSS em todos eles. Se optarmos pelo processo descrito acima, significa que teremos um trabalho árduo e nada produtivo. A solução para esse problema é definir uma classe que contenha essas declarações e aplicá-las nos elementos h1 desejados ou definir a referida declaração para que seja aplicada em todos elementos h1. Sendo assim, vamos mover as declarações CSS utilizadas no elemento h1 para o cabeçalho da página ou para um arquivo CSS externo através da opção Convert Inline CSS to Rule... Tal opção pode ser acessa de várias lugares. Vamos conhecê-los: Menu contextual O menu contextual é exibido ao clicarmos sobre a página com o botão direito do mouse. Se clicarmos sobre um elemento que contenha declaração CSS inline, uma das opções disponíveis no menu CSS Styles será a Convert Inline CSS to Rule..., conforme podemos observar na imagem abaixo: 36

37 Opção Convert Inline CSS to Rule... do menu CSS Styles no menu contextual exibido com o clique direito do mouse Menu Text A opção Convert Inline CSS to Rule... disponível no menu CSS Styles também é encontrada no menu Text. Vejamos: Opção Convert Inline CSS to Rule... do menu CSS Styles no menu Text 37

38 Nota: a opção Convert Inline CSS to Rule... estará disponível somente se a acessarmos com o ponto de inserção sobre um elemento que contenha declaração CSS inline. Coding toolbar Na opção Move or Convert CSS da Coding toolbar - exibida somente no modo de visualização Code View - encontramos também a opção Convert Inline CSS to Rule... Vejamos: Convert Inline CSS to Rule... na Coding toolbar Tag selector Primeiramente precisamos selecionar o elemento que contém a declaração CSS através do Tag selector, neste caso, a tag <h1>. Em seguida, precisamos clicar com o botão direito do mouse sobre ela e aparecerá a opção Convert Inline CSS to Rule..., conforme podemos ver na imagem abaixo: Opção Convert Inline CSS to Rule... no Tag selector 38

39 Como vimos, a opção Convert Inline CSS to Rule... está por toda a inteface do Dreamweaver CS3. Podemos acessá-la onde for mais conveniente. Acessada a referida opção teremos o painel Convert Inline CSS. Vamos assistir o vídeo explicativo abaixo para conhecermos as possibilidades desse recurso: Considerações sobre o painel Convert Inline CSS No painel Convert Inline CSS precisamos definir duas coisas: qual o tipo de conversão que será aplicada sobre declaração CSS inline e onde a conversão será colocada. Na opção Convert to informamos o tipo de conversão. As opções são as seguintes: A new CSS class, All h1 tags e A new CSS selector. Na primeira opção, as declarações CSS ficarão em uma classe CSS e essa classe será definida no elemento que continha as declarações inline. Já na segunda opção, as declarações CSS serão utilizadas para todos os elementos do mesmo tipo da página. E, na terceira opção, um seletor específico para o elemento em questão será criado. Em Create rule in, temos as opções Style sheet e The head of this document. Estas opções são utilizadas para dizermos onde a conversão será colocada, isto é, se será em um arquivo CSS existente, Style sheet, ou no cabeçalho da página em questão - The head of this document. 39

40 Como mover declarações CSS para um arquivo externo O Dreamweaver CS3 incluiu novos recursos que facilitam a administração de CSS em sua interface. Agora é possível movermos as declarações CSS para um arquivo externo de forma simples, prática e rápida. Vamos considerar o layout que criamos na unidade anterior, no qual as declarações CSS foram dispostas no cabeçalho da página. Nosso objetivo, a título de ilustração, é retirar as declarações do cabeçalho e movê-las para um arquivo CSS específico. Para isso, a primeira coisa a ser feita é selecionarmos as declarações que desejamos mover. Feito isso, existem diversos caminhos para realizarmos nosso objetivo (mover as declarações CSS). Vamos conhecê-los. Menu contextual O menu contextual é exibido ao clicar sobre a página com o botão direito do mouse. Se o click for feito sobre uma seleção de declarações CSS, uma das opções disponíveis no menu CSS Styles será a Move CSS Rules..., conforme podemos ver na imagem abaixo: Opção Move CSS Rules do menu CSS Styles no menu contextual exibido com o clique direito do mouse 40

41 Menu Text A opção Move CSS Rules... disponível no menu CSS Styles também é encontrada no menu Text. Vejamos: Opção Move CSS Rules... do menu CSS Styles no menu Text Painel CSS Styles No menu de opções do painel CSS Styles, Window > CSS Styles ou Shift + F11 também encontramos a opção Move CSS Rules... Observemos na imagem abaixo: Move CSS Rules... no menu de opções do painel CSS Styles 41

42 Coding toolbar Na opção Move or Convert CSS da Coding toolbar - exibida somente no modo de visualização Code View - encontramos também a opção Move CSS Rules... Vejamos: Move CSS Rules... na Coding toolbar Como vimos, a opção Move CSS Rules... está por toda a inteface do Dreamweaver CS3, ou seja, podemos acessá-la onde for mais conveniente. Acessada a referida opção teremos o painel Move To External Style Sheet, como podemos ver na imagem abaixo: Panel Move To External Style Sheet 42

43 Nesse painel, informaremos o lugar para onde as declarações CSS deverão ser movidas. As opções são duas: 1. Style sheet: - nesta opção devemos informar um arquivo CSS existente e assim as declarações CSS selecionadas serão movidas para ele. 2. A new style sheet...: - nesta opção, ao clicar no botão OK, teremos que determinar um nome e local onde o arquivo CSS será criado. É nesse arquivo que estarão as declarações CSS selecionadas. 43

44 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. Através do Spry é possível desenvolver interfaces mais ricas e dinâmicas, além da possibilidade de integrar dados no formato XML às páginas HTML. Dessa forma, elas poderão exibir conteúdos dinâmicos e sem a necessidade de tais páginas 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 básicos de HTML, CSS e JavaScript, uma vez que o trabalho árduo de configuração foi facilitado pelo Dreamweaver. Os designers poderão criar efeitos visuais como Appear, Fade, Blinds (Up e Down), Grow, Shake, Slide, entre vários outros. Já os programadores terão facilidades ao trabalhar com o Ajax e na exibição de dados armazenados em arquivos XML. Além desses recursos, tantos para designers quanto para programadores, o Spry oferece alguns widgets que auxiliam na validação de formulários e na criação de elementos de interfaces. Como dito, o Spry são bibliotecas, ou arquivos, JavaScript e CSS e, cada um desses arquivos desempenham um papel específico, isto é, os arquivos JavaScript são os responsáveis pela interatividade que o recurso proporciona; já os arquivos CSS são responsáveis em estilizar o recurso produzido No decorrer das unidades deste capítulo, conheceremos o Spry a fundo e veremos as possibilidades que poderão ser desenvolvidos com tal framework. Além de conhecer sua integração 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. Sobre o Spry Data Visualização da aba Data da Insert bar 44

45 Os recursos que fazem parte do grupo Spry Data são utilizados para trabalhar com dados em arquivos XML. Através 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 pedaços de códigos em sua página, os quais serão responsáveis em carregar os dados do arquivo XML e exibí-los quando o usuário abrir a página em seu navegador. Os recursos do Spry Data, são os seguintes: Spry XML Data Set - para o funcionamento dos demais recursos é necessário 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 padrão é 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 criação 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, não ordenada, lista de definição, ou um elemento de formulário do tipo select. Spry Table - há dois tipos de Spry Table: uma tabela simples e outra dinâmica. Essa última é chamada de "dynamic master table" e responsável por fazer uma ligação entre um Spry Repeat com o intuito de atualizar os dados dinâmicamente. Sobre o Spry Widgets Visualização da aba Layout da Insert bar 45

46 Visualização da aba Forms da Insert bar Um Spry widget é um elemento de interface que enriquece a experiência do usuário junto à página que o utiliza. Ele é composto pelas seguintes partes: Estrutura - códigos HTML que definem a composição estrutural do widget. Comportamento - códigos JavaScript que controlam as respostas do widget mediante os eventos ocasionados pelo usuário. Apresentação - declarações CSS que especificam a aparência do widget. Assim como os widgets, todos os outros recuros do Spry são compostos pelas partes acima citadas. O Dreamweaver CS3 desenvolve e configura todas essas estruturas em poucos e simples cliques. Os recursos do Spry Widgets, são os seguintes: Spry Menu Bar - utilizados na criação de menus drop-down horizontais ou verticais. Spry Tabbed Panels - é um grupo de painéis organizados por abas, onde cada uma delas é exibida por vez. É muito utilizado na exibição de extenso conteúdo em espaços compactos. Spry Accordion - é um grupo de painéis "dobráveis", onde cada um deles é aberto e visível por vez. É muito utilizado na exibição de extenso conteúdo em espaços compactos. Spry Collapsible Panel - é um painel em que o usuário pode exibir ou esconder seu conteúdo. Spry Validation text Field - são campos de formulários que demonstram se o valor digitado em tais campos são válidos ou não. Spry Validation Textarea - são áreas de texto que demonstram se o valor digitado em tais campos representam uma determinada sentença de texto ou não. 46

47 Spry Validation Checkbox - é um checkbox ou um grupo de checkboxes em um formulário HTML que demonstram se a quantidade de checkbox selecionados pelo usuário, ou a não seleção, é uma ação válida ou não. Spry Validation Select - são campos de formulário do tipo select ou drop-down menu que demonstram se a opção escolhida em tais campos é uma opção válida ou não. Sobre o Spry Effects Opção de efeitos no painel Behaviors. Os recursos do Spry Effects são 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, são utilizados para realçar uma informação, criar animação em transições, alterar o estado visual de um elemento por um determinado período, entre vários outros recursos. Os recursos do Spry Effects, são os seguintes: Appear/Fade - faz com que um elemento apareça ou desapareça da interface utilizando a opacidade de tal elemento. Highlight - muda a cor de fundo, background, de um elemento. 47

48 Blind Up/Down - efeito que simula uma cortina se abrindo ou fechando. Muito utilizado para esconder ou revelar um determinado conteúdo. 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 direção ao canto superior esquerdo da página. 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 são aplicados. Se o Spry são 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 são adicionados ao site em questão quando a página que está utilizando o recurso for salva. Já no cabeçalho da página é adicionado uma referência a tais arquivos. A referência do arquivo no cabeçalho da página passa por dois momentos. Um quando a página ainda não foi salva, e o outro, quando ela já foi. Ou seja, quando a página ainda não foi salva, os arquivos referente ao recurso estão armazenados no diretório em que o Dreamweaver foi instalado em sua máquina. Quando você salvar a página, ele será adicionado a um diretório no site em que você o utilizou. Po padrão, esse diretório é denominado como SpryAssets e criado na pasta raiz. Observe uma ilustração da referência dos arquivos do Spry nessas duas situações, respectivamente: Referência dos arquivos no diretório de instalação do Dreamweaver 48

49 Referência dos arquivos no diretório em seu site Se você enviar para o seu servidor web na internet uma página como no primeiro exemplo, o recurso do Spry utilizado não funcionará, uma vez que as pessoas que acessarem a página não terão esses arquivos em suas máquinas. A forma correta é enviar de acordo com a segunda opção demontrada acima onde, além de enviarmos a página, enviamos também o diretório em que os arquivos referente ao recurso utilizado foram armazenados. Quando uma página for salva e ela estiver utilizando algum recurso do Spry, o Dreamweaver CS3 nos alerta sobre essa questão, além de nos informar também o diretório e o nome dos arquivos que foram salvos. Observemos a caixa de diálogo exibida: Caixa de diálogo, Copy Dependent Files 49

50 Como dito anteriormente, o diretório em que os arquivos do Spry são armazenados é denomiado, por padrão, como SpryAssets. Se desejarmos alterar o diretório onde são 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 opção, precisamos seguir o seguinte caminho: Menu Site > Manage Sites... No menu aberto, temos que escolher o site desejado e posteriormente clique no botão Editar. É importante nos certificarmos que estamos na aba Advanced, uma vez que a aba Basic não oferece tal opção. Uma vez que os arquivos foram referenciados corretamente, são necessários outros dois "ingredientes" para o funcionamento do recurso em questão. Estamos falando de um estrutura de código HTML que condiz com o recurso e uma chamada e configuração do recurso. Vejamos o exemplo abaixo: 50

51 Código HTML referente ao recurso Tabbed Panels Não vamos nos preocupar em compreender os detalhes sobre esses códigos agora, iremos conhecê-los melhor nas unidades seguintes. O importante e obrigatório neste momento é observar que a chamada da função relativa ao recurso é feita posteriormente ao código HTML. Caso ela seja feita anteriormente a tal código, o recurso não funcionará. Spry e a interface do Dreamweaver CS3 Na interface de desenvolvimento do Dreamweaver CS3 os recursos do Spry foram agrupados em três grupos: Spry Data, Spry Widgets e Spry Effects. O primeiro oferece recursos para se trabalhar com dados em arquivos XML; o segundo é utilizado na validação de formulários web e na criação de elementos de interface; e o Spry Effects como o próprio nome diz, são efeitos produzidos em elementos HTML. Os recursos Spry Widgets podem ser dividos em dois grupos: um com os recursos de validação de formulários web e outro na criação de elementos de interface. 51

52 Ambos os recursos estão localizados na aba Spry da Insert bar, com exceção dos recursos do Spry Effects que se localizam na opção 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 opções do Spry Data; na aba Forms, os Widgets para validação de formulários; na aba Layout, os Widgets para a criação de elementos de interface. O Property inspector é utilizado na configuração dos recursos em uso. As configurações de cada recurso são exibidas ao selecionar o recurso em questão no Document window. Vamos conhecer, através das ilustrações abaixo, as referidas abas e os recursos do Spry. Visualização da aba Spry na Insert bar Visualização da aba Layout da Insert bar Como dito, na aba Layout temos os widgets para a criação 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. Visualização da aba Forms da Insert bar 52

53 Na aba Layout, há os widgets para a validação de formulários 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. Visualização da aba Data da Insert bar Ao contrário das abas Layout e Forms, na aba Data temos cinco recursos que são utilizados para trabalhar com dados em arquivos XML. São 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 opção Effects do painel Behaviors (Shift + F4). Vejamos: Opção 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 configurações pertinentes a tal recurso. 53

54 Essa facilidade nos permite personalizar o recurso de forma fácil, simples e intuitiva. Vejamos o exemplo abaixo: Property inspector com o Spry Tabbed panels selecionado no Documento window Em uma próxima 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é três níveis. Com o Dreamweaver CS3 é muito simples criar menus desse estilo com utilizando esse recurso. Veremos nesta unidade todo o procedimento de criação. 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

55 Para utlizarmos esse recurso, temos que colocar o ponto de inserção 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 opções 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 três partes que compõe o widget em questão, ou seja, a estrutura - que são os códigos HTML que definem a composição estrutural do widget; o comportamento - que são os códigos JavaScript que controlam as respostas do widget mediante aos eventos ocasionados pelo usuário; e a apresentação - que são as declarações CSS que especificam a aparência do widget. Como pode-se perceber, o Dreamweaver criou todas essas partes em apenas dois cliques. Simples, não? 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, é necessário selecioná-lo no Document window, através de uma aba que o engloba, como podemos observar abaixo: 55