Leia este artigo para saber como aplicar opções de preenchimento do navegador e do plano de fundo 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.

Preenchimentos do navegador e imagens de fundo no Adobe Muse

Quando você planeja o design da Web para o seu site, os preenchimentos de fundo são muito importantes. O Preenchimento de fundo no Adobe Muse permite que você adicione uma cor ou imagem de fundo ao seu site. Você pode usar imagens de fundo para expressar o valor da marca de um produto ou serviço. De maneira semelhante, é possível usar preenchimentos de fundo para adicionar valor de design ou igualar ao tema de cores do seu site.

Quando você adiciona um preenchimento de fundo e visualiza seu site em um navegador, a imagem ou cor selecionada é exibida como fundo na janela do navegador. Para tornar o design uniforme e consistente, aplique o preenchimento de fundo à página mestre.

Leia o seguinte artigo para saber como aplicar opções de preenchimento de fundo no Adobe Muse. Você pode executar um dos seguintes procedimentos: 

Preencha o navegador com uma cor de fundo

  1. No modo de exibição Plano, clique duas vezes na miniatura da página Mestre A para abri-la no modo de exibição Design.

    A página A-Master será aberta em sua própria guia na parte superior da área de trabalho.

    Observe o Indicador de seleção que está localizado no canto esquerdo superior do painel de Controle. Quando nenhum elemento de página for selecionado, o Indicador de seleção exibirá a palavra Página. Se você selecionar um objeto na página, como uma imagem, as palavras Quadro de imagem são exibidas no Indicador de seleção.

    Use o Indicador de seleção para verificar o elemento selecionado que você deseja controlar. Se você selecionar qualquer outro elemento de página, é possível resselecionar a página clicando na área cinza fora da página.

    Com a página selecionada, é possível usar os menus na barra de Controle para atualizar a cor de preenchimento e as configurações de traço.

  2. No painel de Controle, clique em Preenchimento do navegador. Selecione a cor desejada no campo Cor. Você realizar uma das seguintes ações para escolher a cor do preenchimento de fundo:

    • Escolha uma cor usando o Seletor de cores.
    • Digite o valor RGB.
    • Digite o código hexadecimal no campo Hex#.
    • Clique e selecione uma cor nas amostras que já estão salvas.
    Defina uma cor como o preenchimento de fundo
    Defina uma cor como o preenchimento de fundo
  3. Para aplicar uma cor de preenchimento sólida ou gradiente, no painel Preenchimento do navegador, selecione Sólida ou Gradiente. Use o botão de opção para escolher entre cores de preenchimento sólidas ou gradientes.

  4. Para aplicar um gradiente, defina o Tipo de preenchimento como Gradiente. Selecione as amostras de cores para determinar os limites de cor.

    Selecione a opção Preenchimento gradiente
    Selecione a opção Preenchimento gradiente
  5. Defina a orientação do gradiente ajustando a Direção para Horizontal ou Vertical.

  6. No painel de Controle, clique em Preenchimento. Certifique-se de que a cor de preenchimento da página esteja definida como Nenhuma. O menu Preenchimento exibe uma amostra branca com a linha vermelha diagonal.

    Definir o Preenchimento como Nenhum no Adobe Muse
    Definir o Preenchimento como Nenhum

Preencher o navegador com uma imagem de fundo

Usar imagens como preenchimentos de fundo é comum em designs da web. O Adobe Muse permite que você preencha o fundo com imagens repetidas ou com uma única imagem. Além disso, é possível selecionar a posição e propriedades de rolagem da imagem de fundo.

Leia mais para saber como usar imagens nos preenchimentos de fundo no Adobe Muse.

  1. Abra a página Mestre para o seu arquivo .muse. 

    É possível adicionar uma imagem de fundo a uma página específica. Contudo, se você deseja que a imagem de fundo apareça em todas as páginas do seu design, navegue até a página Mestre.

  2. No painel de Controle, clique em Preenchimento do navegador. Certifique-se de que o Tipo de preenchimento esteja definido como Sólido.

    Selecione a imagem de plano de fundo que aparece na janela do navegador.
    Selecione a imagem de plano de fundo que aparece na janela do navegador.

    Observação:

    Se definir o Tipo de preenchimento como Gradiente, você não poderá definir a imagem que é exibida como preenchimento de fundo.

  3. Para selecionar uma imagem como preenchimento de fundo, clique no link Adicionar imagem. Navegue e selecione o arquivo de imagem desejado no seu computador local. Clique em Abrir para definir a imagem do fundo.

  4. Defina o ajuste da imagem de fundo. Você pode selecionar uma das seguintes opções:

    • Dimensionar para preencher: A imagem de fundo aumenta. A imagem muda seu tamanho e posição, de acordo com as configurações que você especificar.
    • Ajustar às dimensões: A imagem se ajusta às dimensões.
    • Tamanho original: A imagem é aplicada a um preenchimento de fundo no tamanho original.
    • Lado a lado: A imagem é repetida ao longo do plano de fundo. A opção lado a lado permite que você coloque imagens menores que se repetem na janela do navegador, independentemente do tamanho do monitor do visitante.
    • Lado a lado horizontalmente: Os blocos de imagem são repetidos na direção horizontal.
    • Lado a lado verticalmente: Os blocos de imagem são repetidos na direção vertical.

    Imagems de fundo lado a lado são usados frequentemente em designs da Web. Quando você publica um site, a imagem pequena original que você define como um preenchimento de fundo lado a lado só é carregada uma vez no navegador. As imagens lado a lado de fundo permitem que você preencha grandes áreas da página sem impactar a velocidade de download ou o desempenho do seu site.

  5. Para definir a posição da imagem de fundo, selecione a posição desejada entre as nove posições de grade. Por exemplo, se você clicar no quadrado central, a imagem é exibida no centro da janela do navegador.

    Observação:

    Para remover um preenchimento de fundo, clique no ícone de lixo próximo ao ícone de pasta.

  6. Clique em qualquer lugar fora do painel Preenchimento do navegador para fechá-lo.

  7. Para visualizar a imagem de fundo, visualize o site no Adobe Muse ou em um navegador.

Aplique largura de 100 por cento para elementos de página

Os itens definidos com a largura de 100% preenchem o navegador horizontalmente, qualquer que seja o redimensionamento da janela do navegador do visitante. Se você definir um elemento de página para se alinhar com as bordas superior e inferior da janela do navegador, um objeto preenchido com uma cor sólida ou ativo lado a lado será expandido para se ajustar ao espaço disponível.

  1. Abra a página em que você deseja definir a largura de 100% para um elemento de página. Selecione o elemento de página obrigatório. Por exemplo, selecione um retângulo que se estende pela largura da página e tenha cerca de 250 pixels de altura, perto da parte inferior da página.

  2. Com o retângulo selecionado, defina a Largura do traço como 0. É possível identificar quando o retângulo estiver selecionado, pois o Indicador de seleção no canto superior esquerdo exibirá a palavra Retângulo.

    Use o campo Traço para definir o traço do retângulo selecionado como 0.
    Use o campo Traço para definir o traço do retângulo selecionado como 0.
  3. No painel de Controle, clique em Preenchimento. Certifique-se de que o menu Preenchimento esteja definido como Nenhum. Você verá uma amostra branca com uma linha vermelha diagonal.

    Use o menu Preenchimento para selecionar o preenchimento em retângulo
    Use o menu Preenchimento para selecionar o preenchimento em retângulo
  4. Clique no link Adicionar imagem no painel Preenchimento. Navegue até a imagem desejada, selecione a imagem e clique em Abrir.

  5. Na lista suspensa Ajuste, selecione Lado a lado horizontalmente. Esta opção faz com que a imagem apareça da esquerda para a direita, ao longo do eixo X.

    Defina a largura de 100% ao retângulo com a imagem
    Defina a largura de 100% ao retângulo com a imagem
  6. Arraste as alças de transformação do retângulo posicioná-lo na parte inferior da área visível. Ajuste a largura para intersectar com os lados esquerdo, inferior e direito da página.

    Uma borda vermelha será exibida temporariamente para indicar que o retângulo está definido com o modo de largura 100%.

Modificar a opacidade e transparência dos preenchimentos de fundo

Além de definir uma imagem como fundo do seu site, o Adobe Muse também permite que você modifique a opacidade do preenchimento. Você pode ajustar a cor de preenchimento de uma página para que fique parcialmente transparente. Por padrão, o Adobe Muse usa um preenchimento branco para a página mestre. Você pode controlar a cor e a transparência da página.

  1. No painel de Controle, clique em Preenchimento do navegador para expandir o menu. Para selecionar uma imagem que você deseja adicionar como preenchimento de fundo, clique no link Adicionar Imagem.

  2. No painel de Controle, clique em Preenchimento  para expandir o menu Preenchimento.

  3. Defina a Opacidade como 80%. Essa configuração significa que está em grande parte ainda opaca, com uma transparência de 20%. Você pode continuar a editar a página e adicionar uma borda ou aplicar mais efeitos gráficos.

    Definir a opacidade do preenchimento de fundo
    Definir a opacidade do preenchimento de fundo

Preenchimento de fundo e efeitos de rolagem

O Adobe Muse permite que você adicione movimento de rolagem às imagens que são aplicadas nos preenchimentos de fundo. Para saber como definir as propriedades de rolagem para imagens de fundo, consulte Aplicar movimento de rolagem a uma imagem de fundo.

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