Adobe Dreaweaver é um programa completo para o desenvolvimento e gestão de websites, que trabalha com tecnologias como HTML, CSS, Javascript e PHP, entre outros. Um detalhe importantíssimo que Dreamweaver tem, é que se você começou a fazer o seu website em um outro programa qualquer, não terá de começar de novo se pretender mudar para Dreamweaver – O programa não irá destruir/alterar o código que você criou! Nesta décima parte do Guia Dreamweaver, vamos-lhe mostrar como introduzir divs com posicionamento absoluto dentro desta aplicação. Está pronto para começar?

Na parte XIII deste Guia Dreamweaver vamos abordar o funcionamento de Spry”s dentro deste aplicativo embora uma Spry não seja propriamente uma ferramenta do Adobe Dreamweaver. Uma Spry é uma tecnologia desenvolvida pela Adobe e distribuída de forma gratuita e independente pelo website da Adobe Labs, que poderá visitar em http://labs.adobe.com/technologies/spry  . As técnicas e métodos que lhe vamos apresentar neste capítulo permitir-lhe-ão ser um perito no web design, juntamente com as funcionalidades oferecidas pela ferramenta da Adobe que o vão tornar um profissional eficiente e competente.

Adobe Dreamweaver CS5

1. O QUE É O SPRY?

Spry é o nome curto para o seu nome oficial que é Spry framework for Ajax, que consiste numa coleção de programas javascript que permitem que você enquanto webdesigner consiga fornecer controlo sofisticado sobre uma página web para os seus visitantes, através de widgets, efeitos e outro tipo de conteúdos. Um widget é um elemento da interface de um website que poderá ser uma barra de menus, uma mensagem de validação de um formulário ou um conjunto de elementos que tornam a utilização de um website mais simples e intuitiva.

A título de exemplo, a Spry Menu Bar insere um conjunto de links para uma barra de navegação compacta, para que possa facilmente encontrar e conseguir navegar no website. Um efeito é um elemento visual que não tem necessariamente de melhorar o funcionamento de um web site, mas faz com que em termos visuais o website seja muito mais atrativo e cativante para quem o visita.

Um Spry Data Set é a apresentação de dados num determinado formato que é mais interativo do que uma simples tabela HTML. Imagine que você tem uma tabela num website com uma lista de produtos de uma determinada empresa. Essa tabela exibe um produto por linha, com colunas para o nome do produto, preço e disponibilidade do mesmo. Um visitante pode ordenar uma tabela de dados Spry por qualquer uma destas colunas, bastando clicar no nome da mesma. E isso tudo acontece sem que o navegador tenha de carregar a página cada vez que é feita uma alteração. Além disso, um conjunto de dados Spry pode utilizar um conjunto de dados presentes num ficheiro XML ou mesmo uma tabela HTML e atualizar uma página web com o conteúdo desses arquivos.

Mas uma vez que nem todos os web designers utilizam XML, Dreamweaver permite que você coloque dados em uma tabela HTML normal e usá-la como base para uma tabela interativa. Ajax é um termo criado e utilizado a partir de 2005 para descrever um sistema de economia de tempo para transferir informações de um servidor web para uma página web (e vice-versa). A vantagem revolucionária do Ajax, como destacado no exemplo do Google Maps, é que ele permite que o conteúdo de uma página mude rapidamente sem ter que recarregar novamente a página web.

2. TABBED PANELS

Alguns visitantes chegam num website e simplesmente não gostam de se dar ao trabalho de fazer scroll e procurar o conteúdo pelo qual estão interessados ou pelo qual chegaram a um determinado website e vão embora do website. Então, para evitar estas situações, alguns web designers começaram a dividir conteúdos que eram demasiado grandes em pequenas partes e em diferentes páginas, para que desta forma cada uma das páginas consiga oferecer um pequeno conjunto de informação e conteúdo que possa ser adquirido e lido de forma fácil pelos visitantes. É claro que esta situação significa a construção de várias páginas ao invés de apenas uma, forçando os visitantes a navegar entre as diferentes páginas.

As Spry Tabbed Panels fornecem uma alternativa a esta situação, pois em vez de criar uma página única com todo o conteúdo, ou pequenas páginas com pequenos pedaços do conteúdo, você irá criar e organizar a informação em diferentes separadores. Desta forma, o seu conteúdo estará sempre centrado na visão do visitante, podendo assim ser acedido de forma fácil e instantânea, bastando aos visitantes clicar em cada um dos separadores para aceder aos diferentes pedaços de conteúdo.

3. ADICIONAR UMA TABBED PANEL

Você poderá inserir uma tabbed panel em qualquer local do seu website, mas uma vez que a inserção de uma tabbed panel significa que terá um elemento na horizontal, certifique-se que tem espaço suficiente para a inserir. A não ser que os tópicos para cada um dos separadores da tabbed panel sejam de uma palavra, deverá inserir a tabbed panel num local com bastante espaço.

Para inserir uma tabbed panel, na janela do documento comece por clicar no local onde quer inserir a tabbed panel. De seguida vá a Inserir – Spry – Painés com abas do Spry:

Guia Dreamweaver - Spry (Parte XIII)

De seguida será inserido automaticamente no seu documento uma tabbed panel, com 2 separadores ou abas:

Guia Dreamweaver - Spry (Parte XIII)

No menu de propriedados no fundo do Adobe Dreamweaver, poderá verificar que depois de seleccionada a tabbed panel, poderá editá-la rapidamente utilizando este men:

Guia Dreamweaver - Spry (Parte XIII)

Se pretender adicionar mais separadores, basta clicar no + e será inserido. Para remover, seleccione o separador que pretende remover e clique no sinal – .

Para inserir conteúdo em cada um dos separadores, o processo é bastante simples, e para alterar entre cada um deles, coloque o mouse sobre o nome de um separador e quando aparecer o simbolo de um olho, clique sobre ele:

Guia Dreamweaver - Spry (Parte XIII)

Depois de clicar, será aberto o separador e será mostrado o respectivo conteúdo:

Guia Dreamweaver - Spry (Parte XIII)

É possível inserir qualquer tipo de elemento dentro do separador da tabbed panel. A título de exemplo, se pretender adicionar um image placeholder, uma tabela ou mesmo um formulário, poderá fazê-lo:

Guia Dreamweaver - Spry (Parte XIII)

Para alterar o nome de cada um dos separadores, basta clicar em cima do nome e poderá editá-lo fácilmente. No próximo artigo iremos continuar a abordar as Spry’s, entrando mais a fundo nesta matéria, fazendo com que você se torne um perito na utilização das mesmas com o auxílio desta fantástica ferramenta que é o Adobe Dreamweaver. Se tiver alguma sugestão, duvida ou comentário não hesite em utilizar os comentários abaixo!

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Tiago Martins
    22 de agosto de 2012

    Pessoalmente não gosto das soluções pré feitas, costumam ser extremamente mal otimizadas.

    Atualmente já nem uso Dreamweaver, só em alguns casos especiais, existem ferramentas bem mais leves para quem não usa esse tipo de “atalhos”.



  2. Jeremias Tertuliano Pereira
    23 de agosto de 2012

    Como faço para que somente o corpo do meu projeto atualize quando eu escolher uma opção no menu,quero que o menu, barra lateral e rodapé não se alterem e sim somente o conteúdo do corpo.

    obrigado



  3. Nane
    28 de fevereiro de 2013

    Baixei uma template no
    http://www.websitetemplatesonline.com/free-template/beauty-center-template.html e não estou conseguindo editar a página de serviços.
    O spry não deixa editar, vc pode me ajudar?



  4. roberto caeiro
    29 de maio de 2014

    Amigo, tenho duas div’s, uma topo (onde coloquei o menu spry) e outra div chamada conteúdo logo abaixo. Como faço para abrir as páginas na div conteúdo usando o menu spry? Estou voltando a programar depois de muitos anos, por isso estou com esta dificuldade.
    Obrigado se puder me ajudar.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz