Baixe Curso de Dreamweaver CS3 e outras Notas de aula em PDF para Matemática, somente na Docsity!
Curso iMasters Adobe® Dreamweaver® CS
O Dia 27 de Março de 2007 foi marcado pelo lançamento da Adobe Creative Suite
- Entre os integrantes dessa novidade está a nova versão do Dreamweaver: o Adobe® Dreamweaver® CS.
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.
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 CS
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.
Modificações na Interface do Dreamweaver CS
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:
- Start Page do Dreamweaver
- Painel New Document do Dreamweaver
Painel New Document do Dreamweaver CS
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:
Painel Site definition do Dreamweaver CS
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
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 ba r da versão 8 e da versão CS3 do Dreamweaver.
Coding bar do Dreamweaver 8
Coding bar do Dreamweaver CS
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.
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 CS
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:
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 CS
Uma vez clicado no botão, teremos o painel Attach External Style Sheet como demonstrado na imagem abaixo:
Painel Attach External Style Sheet
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 CS
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 CS
Browser Compatibility Check (BCC)
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:
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
