Como usar os Spry Tabbed Panels no Dreamweaver CS3

Escrito por ehow contributor | Traduzido por fernando lopes
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

O Dreamweaver CS3 vem com funções chamadas "Spry", que são um jeito de mostrar como ficarão as páginas depois de adicionar-lhes o AJAX. Elas automaticamente oferecem HTML, CSS e JavaScripts a fim de realizar certas funções interativas. Neste artigo você aprenderá a usar o widget "Spry Tabbed Panels".

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Programa Dreamweaver
  • Uma página da web parcialmente completa ou um site

Lista completaMinimizar

Instruções

  1. 1

    "Tabbed panels" (painéis de abas) oferecem uma maneira de fazer uma pequena página da internet conter vários "painéis" de informação onde o usuário clica. Você pode acrescentar imagens, texto e outros conteúdos aos painéis.

  2. 2

    Coloque o cursor onde você deseja acrescentar os painéis de aba em seu documento. Clique no ícone "Tabbed panel" na categoria "Spry", na barra "Insert".

  3. 3

    O widget "Spry" será aberto. Quando o objeto spry aparecer, você terá duas abas e uma área onde você adiciona ou cola um conteúdo para substituir o que veio previamente. As abas são chamadas de Tab 1 e Tab 2.

  4. 4

    Quando um contorno azul destacando o objeto Spry estiver presente no documento, você pode usar o "Property inspector" para customizar o widget. Aqui você insere ou remove painéis de aba e muda a ordem das abas.

  5. 5

    Destaque as abas para mudar seus nomes. Você verá um olho indicando qual aba é visível e também será possível mudar o que está escrito nela.

  6. 6

    Para personalizar a aparência do widget, use CSS. Quando você inseriu o Spry Tabbed Panel, o Dreamweaver automaticamente gerou uma planilha de estilo e alguns JavaScripts e inseriu-os em seu site. Encontre os estilos dos Spry Tabbed Panels no seu painel de estilos CSS. Você pode editar esses estilos para mudar a cor, largura e outros recursos de aparência dos painéis de aba.

  7. 7

    Se tiver problemas para saber o que todos esses estilos fazem, clique duas vezes no nome da planilha de estilo (SpryTabbedPanels.css) e abra a página CSS. Você verá que ela está repleta de comentários para ajudá-lo a entender a função de cada regra de estilo e ver o que pode ser modificado.

  8. 8

    Ao terminar de inserir o conteúdo para cada painel e ter feito qualquer mudança ao seu CSS, você estará pronto para fazer o upload da nova página. Certifique-se de fazer o upload de todos os arquivos HTML, CSS e JavaScript relacionados a fim de fazer o widget funcionar corretamente.

Dicas & Advertências

  • Após completar a customização das Tabbed Panels, procure e apague os comentários da planilha de estilo antes de fazer o upload da CSS pro servidor. Isso lhe poupará banda.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível