Saiba como exibir e desenhar uma nuvem de conteúdos relacionados se estiver usando painéis sanfonados ou com guias no Adobe Muse.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

Adicionar um widget Painel com guias

  1. Abra o painel Biblioteca de widgets (Janela > Biblioteca de widgets). Expanda Painéis e selecione o widget Painel com guias. Arraste o widget da Biblioteca de widgets ao painel Design.

    O widget Painel com guias exibe a formatação padrão quando você o arrasta para uma página.
    O widget Painel com guias exibe a formatação padrão quando você o arrasta para uma página.

  2. Clique na guia superior à direita três vezes. O primeiro clique seleciona todo o Painel com guias, o segundo clique seleciona o Contêiner de guia e o terceiro clique seleciona a Guia à direita.

    Verifique o Indicador de seleção para ver qual subelemento do widget está selecionado no momento. Pressione Delete (Mac) ou Backspace (Windows) para excluir a terceira guia. Após a realização dessa alteração, haverá apenas duas guias. Clique em qualquer outro lugar da página.

  3. Clique no widget novamente para selecionar todo o Painel com guias. Arraste as alças para redimensionar o widget inteiro com uma largura de 840 e uma altura de 645. Ao arrastar as alças, você pode consultar as medidas exibidas enquanto arrasta.

    Você também pode verificar o painel Transformar para ver os valores nos campos L (largura) e A (Altura).

    Examine os campos Largura e Altura para verificar as dimensões do widget redimensionado.
    Examine os campos Largura e Altura para verificar as dimensões do widget redimensionado.

  4. Use a ferramenta Seleção para posicionar o widget Painel com guias na página, perto da parte superior e centralizado verticalmente.

  5. Clique na posição central superior da interface Fixar no painel de controle, para fixar o widget de Painel com guias no local. Para saber mais sobre como fixar objetos na posição para que eles não saiam do lugar, consulte este link.

  6. Com o widget de Painel com guias ainda selecionado, clique na guia esquerda para selecionar o Contêiner de guia (o elemento que contém ambas as guias). Use a ferramenta Seleção para arrastar para baixo a alça central, até que a altura seja de aproximadamente 98 pixels.

    No painel Espaçamento, defina os seguintes valores mostrados na imagem abaixo:

    • Esquerdo: 220
    • Direito: 220
    • Inferior: 2
    • Altura da medianiz: 10
    Defina os valores de espaçamento entre o Contêiner de guia no painel Espaçamento.
    Defina os valores de espaçamento entre o Contêiner de guia no painel Espaçamento.

  7. Após a realização dessas alterações, use a ferramenta Seleção para arrastar todo o widget de Painel com guias até a parte superior da página, de modo que a parte superior do Painel com guias fique contígua à parte inferior do retângulo de cabeçalho sem nenhum espaço vertical entre os dois.

    Se necessário, você poderá ampliar para obter uma aparência mais próxima do modo como os elementos estão alinhados. Defina a ampliação novamente como 100% depois que terminar.

Estilizar o widget Painel com guias

Agora que você adicionou o widget de Painel com guias, a próxima parte envolve atualizar os estilos para criar as duas guias.

  1. Clique na guia esquerda três vezes para selecionar a guia esquerda. Abra o painel Estados e selecione o estado Normal. Use o menu Preenchimento para definir a cor de preenchimento. Defina a largura do traço como 0.

  2. Selecione o estado de Rolagem no painel Estados. Defina a cor de preenchimento do estado de Rolagem da guia como 571E00. Observe que quando você define a cor do estado de Rolagem, o estado de Mouse pressionado também é atualizado para ajustar-se automaticamente.

    Selecione o estado Ativo e também aplique a mesma cor de preenchimento à guia no estado Ativo. Agora, o estado normal é preenchido com a cor de preenchimento escolhida na etapa anterior, e os outros três estados são preenchidos com o 571E00.

  3. Clique na guia esquerda mais uma vez para selecionar a marca. O Indicador de seleção exibe a palavra Rótulo quando selecionado. Selecione o estado Normal no painel Estados e use o painel Texto para definir os seguintes atributos mostrados na imagem abaixo:

    • Fonte da Web: Kaushan Script (ou qualquer fonte de script de sua preferência)
    • Tamanho da fonte: 26Cor: #70909D (você pode renomear essa cor. Por exemplo, como menu-azul)
    • Entrelinha: 120%
    • Alinhamento: Centralizado
    Aplique um estilo ao texto do rótulo atualizando as configurações no painel Texto.
    Aplique um estilo ao texto do rótulo atualizando as configurações no painel Texto.

  4. Com o Rótulo ainda selecionado, clique no botão Novo estilo na parte inferior do painel Estilos de parágrafo. Para reaplicar essa formatação sempre que quiser com um único clique, renomeie o novo estilo de parágrafo. Por exemplo, cabeça-guias.

  5. Ao analisar o painel Estados, a formatação aplicada ao Rótulo quando o estado Normal está selecionado também é aplicada aos estados de Rolagem e de Mouse pressionado. Selecione o estado Ativo e clique no estilo de parágrafo head-tabs novamente, para aplicar a formatação ao estado Ativo. Agora todos os estados de ambas as guias receberam estilos.

    Selecione o estado Normal novamente.

  6. Use a ferramenta Texto para selecionar o texto do rótulo em todas as guias e digitar os nomes apropriados para seus rótulos.

  7. Se você selecionar a guia esquerda e examinar o painel Estados, verá a formatação final aplicada a cada guia e rótulo. Clique na guia à direita e observe que os estados têm a mesma aparência, exceto o conteúdo de texto de cada guia.

    Confira a formatação de cada guia no painel Estados do Adobe Muse.
    Examine a formatação de cada guia no painel Estados.

Adicionar quadros de texto à área de conteúdo em um widget de Painel com guias

  1. Reserve um momento para clicar nas duas guias diferentes, com diferentes rótulos. O texto do espaço reservado para as duas guias é diferente, portanto, você pode ver que um espaço será exibido quando o outro estiver oculto.

  2. Clique na guia à direita no widget. Quando a guia à direita está selecionada, a área de conteúdo correspondente é exibida sob ela. Esse é o mesmo comportamento que ocorre no modo de exibição Design durante a edição da página e no site ao vivo. Isso é o que torna os widgets de Painel com guias muito úteis, pois você pode exibir muito mais conteúdo em uma única página.

  3. Selecione a Área de conteúdo para suas guias. O Indicador de seleção exibe as palavras Área de conteúdo quando selecionado. Selecione o arquivo de imagem de espaço reservado e pressione Delete (Mac) ou Backspace (Windows) para excluí-lo.

  4. Use a ferramenta Texto para selecionar o cabeçalho de texto de espaço reservado existente. Selecione o texto de cabeçalho em negrito, Mauris sit amet, e exclua-o.

  5. Alterne temporariamente do Adobe Muse para a área de trabalho. Abra a pasta de arquivos de amostra e localize o arquivo denominado text-about-ourstory.txt. Clique duas vezes no arquivo para abri-lo em um editor de texto. Copie a primeira parte da página, até a linha que diz: ... crafted through years of baking for friends and family.

  6. Retorne ao Muse. Use a ferramenta Texto para selecionar o texto de espaço reservado existente. Cole o conteúdo do texto copiado no quadro de texto. Deixe uma linha extra e volte para a parte superior do quadro de texto.

  7. Com o quadro de texto selecionado, use o painel Texto para escolher as configurações para formatar o texto: Por exemplo, você escolher as seguintes configurações:

    • Fonte: Droid Serif
    • Tamanho da fonte: 14
    • Cor: #222222
    • Alinhamento: Esquerdo
    • Entrelinha: 120%
  8. Com o texto ainda selecionado, clique no botão Novo estilo na parte inferior do painel Estilos de parágrafo. Clique duas vezes no novo estilo de parágrafo e renomeie-o como. Por exemplo, corpo. Isso facilitará a reaplicação da mesma formatação a outros conteúdos de texto.

  9. No painel Amostras, clique duas vezes no valor de cor #222222 e renomeie esta cor. Por exemplo, katieblack.

  10. No painel de controle, defina a cor do Traçado do campo de texto como #222222 (katieblack) e defina a largura do traçado como 5 pixels.

  11. Use o menu Preenchimento para definir a cor de preenchimento do campo de texto com uma cor bege clara (#F8F3E2). Clique na pasta próximo à seção Imagem e navegue para selecionar o arquivo na pasta de arquivos de exemplo chamada bg-texture.png. Defina o menu Ajuste como: Lado a lado.

  12. No painel Espaçamento, defina o espaçamento da esquerda e da direita. Por exemplo, você pode definir o espaçamento da Esquerda para 24 e o da Direita para 15.

    Defina os valores de espaçamento para criar o espaço visual em torno da cópia de texto colada.
    Defina os valores de espaçamento para criar o espaço visual em torno da cópia de texto colada.

  13. Em seguida, você adicionará o conteúdo a cada um dos contêineres de área de conteúdo correspondentes a cada guia.

    Use a ferramenta Seleção para redimensionar o campo de texto. Arraste-o para o lado esquerdo do contêiner e use as alças para expandir sua largura para aproximadamente metade do espaço da área de conteúdo disponível (aproximadamente 390 pixels de largura por 381 pixels de altura).

Duplicar quadros de texto em um Painel com guias

Em seguida, você duplicará o quadro de texto existente, para criar um segundo quadro de texto que preencha o lado direito da área de conteúdo.

  1. Use a ferramenta Seleção para selecionar o quadro de texto. Pressione e mantenha pressionada a tecla Option (Mac) ou Alt (Windows) enquanto arrastar uma cópia do quadro de texto no lado direito da área de conteúdo (veja a imagem abaixo).

    Use as guias de alinhamento exibidas para garantir que o quadro de texto à direita seja alinhado horizontalmente ao quadro de texto à esquerda.

    Duplique o quadro de texto existente para criar uma segunda coluna à direita.
    Duplique o quadro de texto existente para criar uma segunda coluna à direita.

  2. Alterne temporariamente do Muse para o programa de edição de texto que contém o conteúdo para seu Painel com guias. Copie o conteúdo que você deseja colar na guia duplicada.

  3. Alterne novamente para o Muse. Exclua todo o texto existente no quadro de texto duplicado à direita. Cole o novo conteúdo de texto copiado da área de transferência.

  4. Conforme necessário, use a ferramenta Seleção para posicionar ambos os quadros de texto para que fiquem alinhados e centralizados na área de conteúdo no local desejado.

  5. Com o quadro de texto ainda selecionado, pressione Escape uma vez para selecionar a Área de conteúdo para a guia duplicada. Defina a largura do traço como 0 e defina a cor de preenchimento como Nenhuma.

A cópia dos quadros de texto está quase concluída. A última parte envolve adicionar uma pequena imagem que fica dentro do texto do quadro de texto esquerdo.

Trabalhar com painéis sanfonados

Os widgets de Menu sanfonado são úteis para ajustar bastante conteúdo a uma área física menor da tela. O comportamento de recolhimento e expansão permite que os visitantes cliquem em um painel de rótulo e vejam a exibição da área de conteúdo correspondente. Além dos sites para desktop, os widgets do Painel sanfonado são geralmente usados para exibir o conteúdo em layouts móveis.

Nesta seção, você aprenderá como adicionar conteúdo a páginas individuais do site. Você trabalhará com outro tipo de widget, chamado de widget Sanfonado. Os widgets de Painel (tanto o Sanfonado quanto o de Painel com guias) são úteis porque possibilitam a exibição de mais conteúdo em uma página dentro de uma área menor da tela.

  1. Abra seu projeto no modo de exibição Design e comece a editá-lo.

  2. Escolha Arquivo > Posicionar. Na caixa de diálogo Importar, navegue até a pasta que contém seus ativos e selecione o arquivo de imagem necessário. Clique em Selecionar e depois clique uma vez na parte superior da página para inserir a imagem em seu tamanho original na página como o texto do cabeçalho. Você adicionará o widget Sanfonado abaixo deste cabeçalho.

Adicionar um Menu sanfonado a uma página da Web

  1. Abra a Biblioteca de widgets. (Escolha Janela > Biblioteca de widgets para abri-la. Ou, se já estiver aberta, clique na guia superior para ativar a Biblioteca de widgets no conjunto de painéis encaixados.)

  2. Clique em Painéis para expandir a lista de widgets de Painel. Selecione o widget Sanfonado. Arraste o widget Sanfonado para a página e posicione-o no lado superior esquerdo da região de conteúdo da página.

    Arraste e posicione o widget Sanfonado na página do Adobe Muse.
    Arraste e posicione o widget Sanfonado na sua página.

  3. Com a ferramenta de Seleção, selecione os vários componentes do widget. Quando você seleciona o widget inteiro, o indicador de seleção no canto superior esquerdo do Painel de controle exibe a palavra "Widget". Ao clicar novamente, observe como o Indicador de seleção é atualizado para indicar que você selecionou um contêiner ou um quadro de texto. O Indicador de seleção informa qual parte do widget está selecionada no momento.

    Para cancelar a seleção desse elemento de um widget, clique na tecla Escape para sair da seleção atual em um nível ou pressione-a repetidamente para sair dos elementos agrupados. Como alternativa, clique fora da área do widget e em outra parte da página.

    Por padrão, o widget Sanfonado tem dois painéis. O painel superior exibe o nome da guia de espaço reservado Lorem 1, e o painel inferior exibe o nome da guia de espaço reservado Ipsum 2.

  4. Abra a caixa de diálogo Opções de widget, clicando no ícone de seta azul redondo. Verifique se a opção Editar junto está marcada. Esta opção garante que as alterações feitas em um nome de guia no widget Sanfonado serão aplicadas a todas as guias.

    Veja se Editar conjunto está selecionado no painel Opções dos widgets Sanfonados.
    Veja se Editar conjunto está selecionado no painel Opção dos widgets Sanfonados.

  5. Com a ferramenta Seleção, clique no widget uma vez para selecioná-lo, depois arraste a alça direita para a direita para expandir a largura do widget, de forma que seja suficientemente amplo para cobrir duas colunas, conforme mostrado na imagem abaixo.

    Arraste a alça no widget para expandi-lo para duas colunas.
    Quando o widget for selecionado, arraste a alça direita para expandi-lo e cobrir duas colunas.

  6. Clique no sinal de adição (+) na parte inferior do widget, abaixo de Ipsum 2, para adicionar um terceiro painel. O terceiro painel exibe o nome da guia de espaço reservado Ipsum 3.

Na próxima seção, você aprenderá como inserir o conteúdo de texto em um painel do widget Sanfonado para preenchê-lo. Mas antes, você atualizará o nome da guia superior que é exibido acima do primeiro painel no widget Sanfonado.

Adicionar texto ao Painel sanfonado

  1. Use a ferramenta Seleção para selecionar o quadro de texto da guia superior, denominada atualmente Lorem 1. Clique em "Lorem 1" uma vez para selecionar o widget inteiro e expandir o contêiner que corresponde à guia superior, depois clique no texto "Lorem 1" para selecionar o quadro de texto. As palavras "Quadro de texto" são exibidas no Indicador de seleção quando o quadro de texto é selecionado.

  2. Clique duas vezes no texto de espaço reservado "Lorem 1" para editá-lo e depois digite o texto desejado.

  3. Selecione o contêiner maior cinza claro abaixo da primeira guia. Use a ferramenta Texto para arrastar um quadro de texto para o contêiner maior.

  4. No novo quadro de texto, digite o texto do cabeçalho.

Preencher as guias superiores do Sanfonado com imagens de fundo

  1. Selecione a guia superior do widget Sanfonado que exibe o cabeçalho.

  2. Clique no botão de seta azul redondo para abrir o menu Opções. Desmarque a opção Editar junto. Clique fora do menu Opções para fechá-lo.

  3. Clique na guia superior duas vezes até que o Indicador de seleção exiba as palavras "Quadro de texto". Com o quadro de texto da guia superior selecionado, clique no link Preenchimento no Painel de controle para abrir o menu Preenchimento. Clique no seletor de cores e defina a cor de preenchimento do fundo como Nenhuma, em vez da cor cinza escuro padrão.

  4. Clique no ícone de pasta na seção Imagem para abrir a caixa de diálogo Importar. Navegue até a pasta de ativos e selecione a imagem que você deseja adicionar.

  5. Abra o painel Espaçamento. Mantenha pressionada a seta para cima na seção Preenchimento: L (esquerda) para aumentar o espaço antes do cabeçalho, para que o texto fique centralizado na imagem de fundo da faixa da guia.

    Configurar o espaçamento para o Sanfonado widgets no Adobe Muse
    Use o painel Espaçamento para aumentar o preenchimento à esquerda e centralizar o texto no menu sanfonado.

A primeira guia do widget Sanfonado é concluída.

Caso você tenha desmarcado a configuração Editar em conjunto ao editar a primeira guia, as alterações não serão exibidas nas outras guias. É necessário aplicar estilos separadamente a outras guias no Painel sanfonado.

Girar widgets Sanfonados

Por padrão, os widgets do painel Menu sanfonado são configurados para exibir painéis de rótulo na parte superior e as áreas de conteúdo abaixo, em uma orientação vertical.

Por padrão, widgets Sanfonados no Adobe Muse aparecem na vertical.
Quando você adiciona um widget do painel Menu sanfonado a uma página, ele é exibido verticalmente.

Para criar um controle deslizante horizontal usando o widget de Menu sanfonado, siga estas etapas:

  1. No modo de exibição Design, abra a Biblioteca de widgets e expanda a seção Painel.

  2. Selecione a opção Menu sanfonado na seção Painéis e arraste-a para a página.

  3. Usando a ferramenta Seleção, clique uma vez para selecionar o widget inteiro. O Indicador de seleção no canto superior esquerdo do Painel de controle exibe a palavra: Menu sanfonado.

  4. Mantenha pressionada a tecla Shift enquanto a rotação restringe as proporções, para que você possa mover o widget em incrementos de 45 graus. Uma dica de ferramenta exibirá o valor de rotação atual do widget.

    Gire o widget para -90° ou +90°, dependendo de como você escolher girar o botão sanfonado.
    Gire o widget para -90° ou +90°, dependendo de como você escolher girar o botão sanfonado.

  5. Depois de girar o widget, clique no link Visualizar ou visualize a página no navegador para ver se o Menu sanfonado ainda pode expandir e recolher os painéis conforme esperado. Clique se os contêineres de rótulos forem transformados em script para exibir a área de conteúdo correspondente quando é clicada.

    Agora, só resta preencher os rótulos e os contêineres da área de conteúdo com conteúdo que seja orientado com a "face para cima", em vez da exibição de laterais.

    Siga estas etapas para exibir o conteúdo de texto das áreas de conteúdo: você usará a mesma técnica descrita anteriormente para girar o campo de texto em um contêiner da área de conteúdo.

     

  6. Clique duas vezes no texto padrão da área de conteúdo. A primeira vez seleciona o widget inteiro de Menu sanfonado e a segunda vez seleciona o contêiner da área de conteúdo. Quando a área de conteúdo for selecionada, use a ferramenta Seleção para expandir o tamanho da área de conteúdo, clicando e arrastando as alças de redimensionamento.

  7. Com a área de conteúdo ainda selecionada, clique novamente para selecionar o quadro de texto na área de conteúdo. Passe o cursor perto de um dos cantos do quadro de texto até o cursor de rotação ser exibido. Mantenha pressionada a tecla Shift enquanto gira o quadro de texto para a mesma rotação de 90 graus que o widget externo.

    Gire o conteúdo de texto de espaço reservado para exibir texto na área de conteúdo.
    Gire o conteúdo de texto de espaço reservado para exibir texto na área de conteúdo.

  8. Depois de girar o quadro de texto, use a ferramenta Seleção para reposicioná-lo na área de conteúdo. Use a ferramenta Texto para substituir um texto de espaço reservado pelo texto real que deseja exibir e use as opções de formatação de texto no Painel de controle e no painel de texto para o estilo do texto (ou aplique estilos de parágrafo para atualizar a aparência).

  9. Insira imagens, desenhe retângulos, ou incorpore HTML para preencher os contêineres da área de conteúdo, conforme desejado. Não é necessário girar esse conteúdo porque ele é colocado na vertical no contêiner girado de automaticamente.

Atualizar texto nos contêineres de rótulos

Para atualizar o texto nos contêineres de rótulos, há várias opções.

Se os rótulos são curtos e o texto deve permanecer “na lateral” (para simular livros na estante, por exemplo), use a ferramenta Texto para selecionar o texto de espaço reservado e digite os rótulos desejados (veja a imagem abaixo).

Edite o texto do rótulo usando a ferramenta Texto para widgets Sanfonados.
Edite o texto do rótulo usando a ferramenta Texto para widgets Sanfonados.

Se não quiser usar rótulos de texto, basta excluir o texto de espaço reservado nos contêineres de rótulos e usar as opções de formatação no painel de controle ou painel de preenchimento (juntamente com o painel de estados) para aplicar uma cor diferente a cada rótulo (veja a imagem abaixo). Para atualizar individualmente a aparência de cada contêiner de rótulos, clique no botão de seta azul para acessar o menu Opções e desativar a opção Editar junto.

Use o menu Preenchimento e as opções de formatação de texto para codificar em cores os contêineres de rótulos e o conteúdo de texto correspondente.
Use o menu Preenchimento e as opções de formatação de texto para codificar em cores os contêineres de rótulos e o conteúdo de texto correspondente.

Outra opção é usar um programa de edição de imagens para criar imagens que serão inseridas nos painéis de rótulo. Coloque as imagens na página, corte-as, selecione o texto do rótulo pela ferramenta Texto e cole as imagens nos contêineres de rótulos. Se desejar, as imagens podem conter texto orientado verticalmente (veja a imagem abaixo).

Insira imagens com texto orientado verticalmente nos contêineres de rótulos.
Insira imagens com texto orientado verticalmente nos contêineres de rótulos.

Adicione links de ancoragem nos painéis sanfonados

É possível vincular qualquer elemento de página aos widgets sanfonados adicionando links de ancoragem aos painéis sanfonados. Leia para saber como adicionar links de ancoragem aos widgets sanfonados:

  1. Selecione o widget sanfonado onde deseja adicionar o link de ancoragem. Clique na guia na qual deseja adicionar o link de ancoragem.

  2. Clique na ferramenta de Ancoragem para carregar um link de ancoragem na Pistola de posicionamento.

    Selecione a ferramenta de Ancoragem no painel Ferramentas.
    Selecione a ferramenta de Ancoragem no painel Ferramentas.

  3. Coloque o link de ancoragem no widget sanfonado.

    Um pop-up para renomear a ancoragem é exibido. Digite um nome adequado para a ancoragem e clique em OK.

    Coloque o link de ancoragem no widget sanfonado
    Coloque o link de ancoragem no widget sanfonado

    Agora é possível vincular essa ancoragem a qualquer elemento de página atual de qualquer página no seu site.

  4. Para vincular um elemento de página para essa ancoragem, selecione o elemento de página ao qual deseja vincular. Na lista suspensa de hiperlinks na parte superior, escolha a ancoragem que você criou.

    No site ativo, sempre que você clica no elemento de página, a página exibe a guia sanfonada onde você inseriu o link de ancoragem.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online