Selecione Inserir > Spry > Acordeão do Spry.
Última atualização em
May 05, 2021 02:01:08 AM GMT
Observação:
Os widgets do Spry foram substituídos pelos widgets do jQuery no Dreamweaver CC e posterior. Embora ainda possa modificar os widgets do Spry existentes na página, você não pode adicionar novos.
Sobre o widget Acordeão
O widget Acordeão é um conjunto de painéis flexíveis que podem armazenar um volume grande de conteúdo em um espaço compacto. Os visitantes do site clicam na aba do painel para ocultar ou revelar o conteúdo armazenado no acordeão. Os painéis do acordeão se expandem ou contraem de acordo com a aba em que o visitante clica. Em um acordeão, somente um painel de conteúdo fica aberto e visível em determinado momento. Este exemplo mostra um widget Acordeão com o primeiro painel expandido:
A. Aba do painel Acordeão B. Conteúdo do painel Acordeão C. Painel Acordeão (aberto)
O HTML padrão do widget Acordeão é composto de uma tag div externa que contém todos os painéis, uma tag div para cada painel, um div de cabeçalho e um div de conteúdo dentro da tag de cada painel. Um widget Acordeão pode conter inúmeros painéis individuais. O HTML do widget Acordeão também inclui tags de script no cabeçalho do documento e após o markup HTML do acordeão.
Para obter uma explicação abrangente sobre como o widget Acordeão funciona, inclusive uma anatomia completa do respectivo código, consulte www.adobe.com/go/learn_dw_spryaccordion_br.
Para ter acesso ao tutorial sobre como trabalhar com widgets Acordeão consulte www.adobe.com/go/vid0167_br.
Inserir e editar o widget Acordeão
Inserir o widget Acordeão
Observação:
Para inserir um widget Acordeão, você também pode usar a categoria Spry no painel Inserir.
Adicionar um painel a um widget Acordeão
-
Selecione um widget Acordeão na janela Documento.
-
Clique no botão de adição (+) de Painéis no Inspetor de propriedades (Janela > Propriedades).
-
(Opcional) Altere o nome do painel selecionando e alterando o texto desejado do painel na Visualização de design.
Excluir painel de um widget Acordeão
-
Selecione um widget Acordeão na janela Documento.
-
No menu Painéis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel a ser excluído e clique no botão de subtração (-).
Abrir painel para edição
-
Siga um destes procedimentos:
Mova o ponteiro do mouse sobre a aba do painel para abri-lo na Visualização de design e clique no ícone em forma de olho que aparece à direita da aba.
Selecione um widget Acordeão na janela Documento e clique no nome do painel para editá-lo no menu Painéis do Inspetor de propriedades (Janela > Propriedades).
Alterar a ordem dos painéis
-
Selecione um widget Acordeão na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel do Acordeão que você deseja mover.
-
Clique nas setas para cima e para baixo para mover o painel para cima ou para baixo.
Personalizar o widget Acordeão
Embora o Inspetor de propriedades permita que você faça edições simples em um widget Acordeão, ele não aceita tarefas de estilização personalizadas. Você pode alterar as regras de CSS para o dispositivo Acordeão e criar um acordeão com o estilo de sua preferência.
Para obter uma referência rápida sobre como alterar as cores no dispositivo Acordeão, consulte o Guia rápido para painéis com guias, acordeões e contrair painéis de David Powers.
Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn_dw_spryaccordion_custom_br.
Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryAccordion.css. O Dreamweaver salva o arquivo SpryAccordion.css na pasta SpryAssets do seu site sempre que você cria um widget Acordeão do Spry. Esse arquivo também contém informações comentadas sobre vários estilos que se aplicam ao widget, o que poderá ser útil.
Observação:
Embora você possa facilmente editar regras para o widget Acordeão diretamente no arquivo CSS, você também pode usar o painel Estilos CSS para editar o CSS do acordeão. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos do widget, especialmente se você usar o modo Atual do painel.
Criar o estilo do texto do widget Acordeão
Para criar o estilo do texto de um widget Acordeão, configure as propriedades do recipiente inteiro do widget Acordeão ou configure as propriedades dos componentes do widget individualmente.
-
Para alterar o estilo do texto de um widget Acordeão, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicionar os valores e as propriedades de estilo do seu próprio texto:
Texto a ser alterado
Regra de CSS relevante
Exemplo de propriedades e valores a adicionar
Texto no acordeão inteiro (inclui aba e painel de conteúdo)
.Accordion ou .AccordionPanel font: Arial; font-size:medium;
Texto somente nas abas do painel do acordeão
.AccordionPanelTab font: Arial; font-size:medium;
Texto somente nos painéis de conteúdo do acordeão
.AccordionPanelContent font: Arial; font-size:medium;
Alterar as cores de fundo do widget Acordeão
-
Para alterar as cores de fundo de diversas partes de um widget Acordeão, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicione ou altere os valores e as propriedades da cor de fundo:
Parte do widget a alterar
Regra de CSS relevante
Exemplo de propriedade e valor a adicionar ou alterar
Cor de fundo das abas do painel do acordeão
.AccordionPanelTab background-color: #CCCCCC; (este é o valor padrão.)
Cor de fundo dos painéis de conteúdo do acordeão
.AccordionPanelContent background-color: #CCCCCC;
Cor de fundo do painel do acordeão aberto
.AccordionPanelOpen .AccordionPanelTab background-color: #EEEEEE; (este é o valor padrão.)
Cor de fundo das abas do painel focalizado
.AccordionPanelTabHover color: #555555; (este é o valor padrão.)
Cor de fundo da aba do painel aberto focalizado
.AccordionPanelOpen .AccordionPanelTabHover color: #555555; (este é o valor padrão.)
Restringir a largura de um acordeão
Por padrão, o widget Acordeão se expande até ocupar o espaço disponível. Entretanto, você pode restringir a largura de um widget configurando uma propriedade de largura para o recipiente do acordeão.
-
Abra o arquivo SpryCcordion.css e localize a regra de CSS .Accordion. Essa é a regra que define propriedades para o principal elemento recipiente do widget Acordeão.Observação:
Você também pode localizar a regra selecionando o widget Acordeão e verificando o painel Estilos CSS (Janela > Estilos CSS). Verifique se o painel está definido no modo Atual.
-
Adicione um valor e uma propriedade de largura à regra. Por exemplo largura: 300px;.
Artigos relacionados
Fazer logon em sua conta