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 continuar a 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

4. ACCORDIONS

A utilizaçao das sprys pode ser também feita tirando partido não só das tabbed panels como também dos accordions, que em termos básicos têm o objetivo mas são feitos de maneiras diferentes. Enquanto que um tabbed panel é feito com a utilização de separadores, um accordion é feito através da utilização de linhas completas onde você poderá carregar e o conteúdo será mostrado deslizando. Para inserir um accordion numa página o processo é praticamente igual ao das tabbed panels, bastando dirigir-se a Insert -> Spry -> Spry Accordion

Guia Dreamweaver - Spry (Parte XIV)

Depois de inserido o accordion e mais uma vez trabalhar o mesmo não é difícil, sendo que o método de introdução de conteúdo e alteração dos títulos é bastante intuitiva e simplificada pelo aplicativo em si. De notar que, quando salvar o documento será notificado sobre a necessidade de anexar ao ficheiro html dois ficheiros essenciais para o correto funcionamento do accordion, um ficheiro javascript e um ficheiro CSS

Guia Dreamweaver - Spry (Parte XIV)

Depois de salvar o documento, abra-o em um navegador e observe o resultado:

Guia Dreamweaver - Spry (Parte XIV)

Se clicar em cada um dos accordions, estes serão abertos e o conteúdo será mostrado.

5. COLLAPSIBLE PANELS

Ainda dentro dos spry temos os collapsible panels que em termos genéricos é bastante parecido com um accordion, com a diferença que consiste em ser apenas 1 separador. Isto é útil para quê? Bom, a utilização de um collapsible panel pode ser útil para poupar espaço na área visível do website, permitindo assim poder fornecer aos visitantes e usuários de um website uma área de conteúdos maior e mais limpa, sem elementos que não são necessários em primeira instância. Para a introdução de um collapsible panel, dirija-se a Insert -> Spry -> Collapsible Panels

Guia Dreamweaver - Spry (Parte XIV)

Depois de inserir, o processo de edição é semelhante ao dos pontos anteriores. Mais uma vez, à semelhança do que aconteceu anteriormente, quando salvar o documento, será notificado sobre a inserção de 2 ficheiros relacionados com a collapsible panel, que são necessários para o correto funcionamento da mesma:

Guia Dreamweaver - Spry (Parte XIV)

Se seleccionar a collapsible panel, terá acesso a algumas opções que são importantes, como por exemplo determinar o estado inicial da mesma, se aberto ou fechado:

Guia Dreamweaver - Spry (Parte XIV)

Depois de determinar como pretende que seja o comportamento inicial da collapsible panel, salve o documento e observe o resultado:

Guia Dreamweaver - Spry (Parte XIV)

6. SPRY TOOLTIPS

As spry tool tips são pequenos pop ups que podem ser anexados em locais do seu website para fornecer informação adicional aos usuários ou aos seus visitantes sem preencher demasiado espaço visivel da página. Isto é feito de forma a que a tool tip esteja escondida até que seja accionada através de um gatilho, que por norma é o mouse passar por cima de um elemento onde esteja inserida uma tooltip. Imagine que pretende inserir uma nota em uma imagem presente em um determinado website, ou inserir notas num portfolio sobre o local onde foram tiradas as fotografias e mais algumas informações relevantes que não necesitam de estar de todo à mostra, preenchendo espaço visível e provevelmente até distraindo o visitante daquilo que importa: a fotografia.

Guardando o espaço para a imagem, e inserindo as informações em uma tool tip que só será mostrada quando o mouse passar sobre a imagem é um excelente método de manter o visitante focado naquilo que realmente interessa, tendo posteriormente acesso ás informações quando passar com o mouse por cima. Naturalmente, os visitantes não irão adivinhar que existe uma tooltip nas imagens, pelo que será de bom tom inserir uma pequena nota na página inicial do seu portfolio em que dá conta que se o mouse passar por cima das imagens, terão acesso a informações.

Para inserir uma tooltip em uma imagem, seleccione a imagem e dirija-se a Insert -> Spry -> Spry Tooltip

Guia Dreamweaver - Spry (Parte XIV)

Depois de inserir a Spry, provavelmente vai-se questionar porque é que a mesma foi inserida por baixo da imagem e não na imagem. Embora o posicionamento da tooltip no editor não seja em cima da imagem, a verdade é que a mesma ficou associada à imagem, e agora tudo o que necessita é inserir o que pretender dentro da tooltip podendo inclusivamente inserir imagens. Depois de editar a tooltip, salve o documento e mais uma vez é necessário anexar alguns ficheiros que são cruciais para o bom funcionamento da tooltip:

Guia Dreamweaver - Spry (Parte XIV)

Depois de salvar o documento observe o resultado:

Guia Dreamweaver - Spry (Parte XIV)

Quando passamos com o mouse por cima da imagem surge a tooltip dando conta de algumas informações que poderão ser interessantes para o visitante ou para o usuário. De notar que a tooltip não está estilizada de acordo com o que seria mais apropriado, mas para efeitos de teste e demonstração do funcionamento das mesmas o resultado é aquele que se esperava, com o conteúdo inserido no editor da tooltip a ser mostrado apenas quando o mouse é passado sobre a imagem.

Uma última nota que vamos deixar é as propriedades que podem ser alteradas da tooltip, onde poderá determinar um offset horizontal e vetical, determinar um delay tanto para quando a tooltip aparece, como para quando a tooltip desaparece, pode inserir um efeito de blind ou fade (em termos pessoais acho que o efeito fade fica bombástico) e poderá ainda determinar se pretende que a tooltip siga o mouse e esconder quando o mouse sair:

Guia Dreamweaver - Spry (Parte XIV)

7. SPRY DATA SETS

Adobe Dreamweaver inclui um método para apresentar conteúdo de forma mais dinâmica, podendo fugir assim ás tabelas HTML simples que tornam a apresentação de conteúdo chata e pouco atrativa para os visitantes. As Spry Data Sets fornecem vários métodos para que você possa apresentar conteúdo de várias fontes, incluindo tabelas HTML simples ou ficheiros XML. Com um Spry Data Set poderá por ex. criar uma fantástica tabela interativa, em que os visitantes poderão ordenar o conteúdo de acordo com cada uma das colunas, clicando no nome da mesma.

Para inserir um Spry Data Set, clique em Insert -> Spry -> Spry Data Set

Guia Dreamweaver - Spry (Parte XIV)

Depois de clicar, irá ser aberta uma janela onde terá vários opções a tomar no que toca ao conteúdo do Spry Data Set:

Guia Dreamweaver - Spry (Parte XIV)

Depois de seleccionar as devidas opções a Spry Data Set será inserida no documento:

Guia Dreamweaver - Spry (Parte XIV)

No próximo artigo iremos entrar no mundo do manuseamento de websites com a utilização de algumas das funcionalidades mais poderosas presentes neste aplicativo, onde vamos também dar-lhe a conhecer um esquema básico da estrutura de um website, como fazer o planeamento do mesmo e ainda como organizar os ficheiros nos diretórios.

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. Jogos
    15 de setembro de 2012

    muito legal seu site!



    • Diogo Espinha
      24 de setembro de 2012

      Olá Jogos, obrigado pela sua visita e comentário!

      Abraço


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