X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Adicionando e editando Acordeões Spry Usando CSS no Dreamweaver
Traduzido pelo Google Translate

Acordeões Spry é uma maneira deliciosa em que a entregar grandes quantidades de informação em um espaço confinado. Eles também são uma


Passo 1 - Criar uma DIV AP

Eu gosto de controlar a posição de um Spry, colocando-o dentro de um DIV AP. Para criar uma Div PA vá ao Painel de Insert e escolha Layout

AP Div Draw

AP Div Sorteio


Use o cursor para desenhar uma caixa na página. A caixa azul que aparece é a sua Div AP.


Passo 2 - Posição e Tamanho da Div AP

Mover o Div AP (que é apenas uma Tag DIV que tem algum controle de sua formatação CSS) pegar a alça branca pequena em sua parte superior esquerda e arraste a sua interposição para a sua página.

Re-size AP DiV

Redimensionar AP DIV


Para redimensionar a AP Div que você poderia pegar um de seus pontos de ancoragem azul e arraste para o tamanho desejado.


Passo 3 - Accordion um Inset Spry

Clique dentro da Div PA para ativar o cursor dentro, então a partir do Painel Insert escolha Layout

Spry inserted

Spry inserido


A Spry Accordion aparece dentro da Div AP que você desenhou.


Passo 4 - Adicionar Painéis Mais

O Accordion Spry utiliza painéis para permitir aos usuários a revelar ou esconder o seu conteúdo em um movimento semelhante a um acordeão, daí o nome. Estou adicionando um pouco mais.

Com o Spry Accordion selecionados (que você pode fazer clicando na etiqueta Acordeão Ciano-colored Spry). Use o Painel de Propriedades para adicionar rótulos mais.

Labels in properties

Etiquetas em propriedades


Usar o botão para adicionar dois painéis mais para que você veja isto:

More labels added to spry

Mais etiquetas adicionado ao spry


Passo 5 - Editar o conteúdo do Spry

Quando você passar o cursor sobre cada Tab Label na Accordion Spry, um símbolo do olho que aparecerá. Ao clicar neste símbolo irá abrir o conteúdo do guia específica que lhe permite editá-lo.

Eye and contents

Olho e conteúdo


Destacando o texto da etiqueta permite que você mude o nome do rótulo. Destacando o texto "Conteúdos" permite que você edite o texto contido no interior do Spry.

Dica: copiar e colar grandes quantidades de texto aqui.

Filled Spry

Preenchida Spry


Repita este procedimento até ter conteúdo e os nomes para cada etiqueta.

Para ver como o Accordion Spry opera, ligar o Live View e clique em cada Tab Panels, por sua vez. Bom, certo?

Live View Button

Botão Exibição ao vivo


Manter o Live View ativa a partir daqui que você possa acompanhar as mudanças que você está fazendo.


Passo 6 - Edite o estilo do Painel de Tabs

Dê uma olhada no painel Estilos CSS, você verá uma folha de estilo chamada SpryAccordion.css:

Spry CSS

Spry CSS


Clique na seta para revelar o conteúdo da Folha de estilo e você verá uma lista de estilos classe de compostos, todos os que controlam os aspectos individuais de como o Accordion Spry parece.

Panel Tab Style

Estilo Tab Panel


Você vai ver a partir das propriedades CSS que a cor de fundo padrão é # CCCCCC. Alterar este texto para ler # 00CC66 (Dica: este pode ser abreviado para # 0C6)

Green tabs

Guias verdes


Os painéis mudará para verde.

. AccordionPanelOpen e. AccordionPanelTab e definir a cor de fundo para # 0F9.


Passo 7 - Editar o estilo da Tabs Focada

Experimente clicar sobre as Guias do painel e você verá que eles ficam azuis. Isso ocorre porque o controle das propriedades CSS foco está definido como azul:

Blue Spry

Azul Spry


Para alterá-los faça o seguinte no CSS:

Para criar um destaque para o separador que está aberto:

  • Select .AccordionFocused, .AccordionPanelOpen and .AccordionPanelTab and set their background color to #9FC


Para se certificar de que qualquer painéis fechados enquanto o Spry Accordion está ativo são o mesmo verde como os painéis fechados quando o Spry Accordion não está ativo:

  • Select .AccordionFocused and .AccordionPanelTab and set their background color to #0C6

Finished Spry

Terminou Spry


Você poderia continuar a adicionar ou modificar os parâmetros em qualquer classe e todos os estilos na folha de estilo SpryAccordion.css como quiser, como os princípios são os mesmos. Vá em frente e tente adicionar cor ao texto, ou mudar a fonte, etc até que você criar um estilo que mais lhe convier.


David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link