Lar Mídia social Como criar painéis com tablados com jQuery no Dreamweaver - dummies

Como criar painéis com tablados com jQuery no Dreamweaver - dummies

Vídeo: Floreira 2025

Vídeo: Floreira 2025
Anonim

A opção jQuery UI Tab no Dreamweaver facilita a adição de uma série de painéis que exibem ou escondem conteúdo correspondente a uma série de guias. Semelhante aos painéis dobráveis, esta funcionalidade jQuery UI permite que você mostre mais informações em menos espaço dentro de uma janela do navegador.

Semelhante aos painéis de acordeão, os painéis com abas podem ser usados ​​para exibir texto, imagens e multimídia.

Quando você cria painéis com o widget jQuery UI no Dreamweaver, você pode especificar a ordem das guias, controlando efetivamente o conteúdo que aparece quando a página é carregada pela primeira vez.

Siga estas etapas para criar um grupo de painel com guias:

  1. Coloque o cursor em uma página em que deseja que o painel com abas apareça.

  2. Escolha Inserir → jQuery UI → Tabs, ou clique no item Tabs no painel jQuery UI Insert.

    Um painel com guias é inserido na página e os arquivos CSS correspondentes aparecem no painel CSS Designer Source.

  3. No espaço de trabalho principal, selecione o Tab1, Tab2, e Tab 3 texto por sua vez e, em seguida, substitua cada cabeçalho da guia com o texto que deseja exibir na guia do painel área.

    Você pode editar o conteúdo das guias somente no espaço de trabalho, e não no Inspetor de propriedades. Por padrão, o texto na área Tab é negrito e preto, mas você pode alterar essa formatação alterando a regra CSS correspondente.

  4. Para ajustar o tamanho de cada guia, selecione a guia e use as configurações de Altura e Largura no Inspetor de propriedades.

    Com uma guia individual selecionada, o inspetor de propriedades exibe as configurações para essa guia especificamente.

  5. Para adicionar conteúdo, selecione a palavra Conteúdo na área principal de qualquer painel de tabulação selecionado e, em seguida, insira texto, imagens ou multimídia.

    Você pode copiar texto em um painel, colando-o exatamente como você colaria texto em qualquer outro lugar da página. Da mesma forma, insira imagens em painéis exatamente como você faria em qualquer outro lugar em uma página: Escolha Inserir → Imagem → Imagem e, em seguida, selecione o arquivo GIF, JPEG ou PNG que deseja exibir. Você também pode adicionar arquivos multimídia ou Photoshop se desejar usar o Dreamweaver para otimizar suas imagens.

  6. Para alterar a aparência de uma guia ou um painel, como o rosto ou a cor da fonte, edite a regra CSS correspondente.

    Por exemplo, para editar a cor ou fonte de texto nas guias, selecione a caixa ao redor da guia e a caixa em torno do estilo é selecionada automaticamente no painel Seletor de CSS Designer.

  7. Para editar o número ou a ordem dos painéis com abas, clique na aba azul jQuery Tabs na parte superior do conjunto de painéis na área de design.

    Quando você clica na guia azul, as configurações do painel aparecem no inspetor de propriedades. Clique fora da área de caixa azul e o inspetor de propriedades retorna às suas configurações padrão.

  8. Para adicionar guias, clique no ícone de sinal de mais (+) no Inspetor de propriedades.

    Novas guias aparecem no espaço de trabalho.

  9. Para alterar a ordem das guias, selecione o nome da guia no Inspetor de propriedades e use as setas no campo Painéis para mover o painel.

    Os nomes dos painéis movem-se para cima e para baixo no menu à medida que a ordem é alterada. Os painéis e as respectivas guias correspondem à página da Web na ordem em que aparecem no inspetor de propriedades.

  10. Selecione o painel na lista suspensa Painéis que deseja exibir quando a página é carregada em um navegador da Web.

    A lista suspensa corresponde aos nomes que você atribuiu a cada guia no espaço de trabalho.

  11. Escolha Arquivo → Salvar para salvar a página; Quando a caixa de diálogo Arquivos Dependentes de Cópia for exibida, clique em OK para gerar automaticamente todos os arquivos relacionados.

    Para que os recursos jQuery UI funcionem, você deve carregar esses arquivos para o seu servidor web quando você carrega a página da Web.

  12. Clique no ícone do globo na parte superior do espaço de trabalho e selecione um navegador para visualizar seu trabalho em um navegador.

    Dependendo do seu navegador da Web, você pode ter que permitir controles ActiveX para visualizar a página no seu computador.

Como criar painéis com tablados com jQuery no Dreamweaver - dummies

Escolha dos editores

Como o Colégio dos Cardeais Escolhe um Novo Papa - manequins

Como o Colégio dos Cardeais Escolhe um Novo Papa - manequins

Quando um papa morre no cargo ou renuncia , como fez o Papa Bento XVI no início de 2013, o Colégio dos Cardeais (todos os cardeais da Igreja Católica) reuniu-se para eleger um novo papa. No prazo de 15 dias e no máximo 20 dias após a morte ou renúncia do papa, todos os cardeais ...

Como o Papa João Paulo II tornou-se um filósofo-Teólogo - manequins

Como o Papa João Paulo II tornou-se um filósofo-Teólogo - manequins

Quando João Paulo II ainda era Karol Wojtyła, uma adolescente no ensino médio, ele era tão bom em falar em público que ele foi escolhido para dar o endereço de boas-vindas a um dignitário muito especial visitando a escola um dia. O Príncipe Adam Stefan Stanisław Bonfatiusz Józef Sapieha (que é um bocado), o Arcebispo de Cracóvia e um ...

Assunção de Mary no Céu - manequins

Assunção de Mary no Céu - manequins

No calendário católico, o Dia da Assunção observa o dia em que Maria morreu e subiu - corpo e alma - no paraíso. A Igreja Católica professa que quando o tempo de Maria na Terra chegou ao fim, seu corpo foi colocado em um túmulo, mas seu corpo não caiu na Terra. Em vez disso, seu filho, Jesus Cristo, assumiu o seu corpo ...

Escolha dos editores

Como excluir fotos na sua Nikon D5300 - manequins

Como excluir fotos na sua Nikon D5300 - manequins

Você tem três opções para apagar imagens de uma memória quando estiver na sua Nikon D5300. Uma nota antes de começar: nenhuma das funções Excluir apaga as imagens que você protege. Para apagar fotos protegidas, primeiro você deve remover a proteção do arquivo. Como eliminar imagens uma de cada vez Durante a reprodução da imagem, você ...

Como exibir a visualização de visualização ao vivo em uma tela HDMI - manequins

Como exibir a visualização de visualização ao vivo em uma tela HDMI - manequins

Você pode conectar seu Câmera Nikon D7100 para um dispositivo HDMI (Interface Multimídia de Alta Definição) para ver a saída Live View na tela. Esse recurso é freqüentemente usado por fotógrafos de estúdio que querem uma visão maior do assunto do que o monitor da câmera fornece. Alguns problemas surgem quando você aproveita esta opção: ...

Como ativar a rotação automática da imagem em sua Nikon D5300 - manequins

Como ativar a rotação automática da imagem em sua Nikon D5300 - manequins

Quando tirar uma foto, o seu D5300 pode gravar a orientação da imagem - seja você segurado a câmera normalmente, criando uma imagem orientada horizontalmente ou girando a câmera do lado para filmar uma foto verticalmente orientada. Durante a reprodução, a câmera pode então ler os dados de orientação e girar automaticamente a imagem para que apareça ...

Escolha dos editores

Construir confiança para vender em mídias sociais - manequins

Construir confiança para vender em mídias sociais - manequins

Se o seu objetivo online é concluir uma venda para seus amigos e fãs de redes sociais, você terá que dar a essas pessoas um olhar frio e difícil. Alguns acreditam que mais é melhor. Mas mais o que? Você precisa se concentrar em pessoas que, no final do dia, podem comprar algo de você diretamente ou ...

Criar sua própria comunidade social para comércio - manequins

Criar sua própria comunidade social para comércio - manequins

Em um site comercial bem produzido, você muitas vezes vêem um link para uma área de comunidade social, que também pode levar o site externo para sites de redes sociais. Esta área é onde as páginas de serviço ao cliente e perguntas freqüentes vivem. Você também pode encontrar uma comunidade de clientes para clientes que incentive a participação de quem visita o site comercial. Se você escolher ...