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.
Em um design responsivo, um layout único de objetos e texto pode não se adaptar a todos os tamanhos de tela. Imagens, texto, widgets e formulários podem ser reposicionados em diferentes pontos de quebra. Os quadros podem sair da largura da página, os objetos podem se sobrepor ou a claridade do texto pode ser reduzida. Imagens, texto, widgets e formulários podem precisar ser reposicionados em diferentes pontos de quebra. Portanto, é essencial organizar os objetos e formatar o texto cuidadosamente, de modo que eles apareçam corretamente em diferentes tamanhos de tela.
Depois de projetar sua página, você pode usar o controle deslizante para visualizar seu layout em diferentes tamanhos de tela. Se achar necessário organizar os objetos de forma diferente nas larguras específicas do navegador, é possível adicionar pontos de quebra.
Continue lendo para saber mais sobre pontos de quebra e como projetar efetivamente um layout no layout responsivo do Adobe Muse.
Os pontos de quebra em um layout responsivo representam as diferentes larguras do navegador em pixels. Os pontos de quebra permitem visualizar o design em larguras do navegador diferentes e testar como os objetos em uma página respondem à alteração em larguras do navegador.
Por padrão, um novo site no Adobe Muse contém pontos de quebra para desktops (largura de 960 pixels). Você pode começar a criar o design de seu layout para essa largura. Ao concluir o design, você pode visualizar o layout em várias larguras usando o controle deslizante. Ao fazer isso, você pode exibir e gravar a largura em que o design é interrompido. Por exemplo, uma linha de texto se divide em duas ou imagens que estavam em sequência acabam empilhadas verticalmente. Essas são as larguras que precisam de pontos de quebra adicionais. Depois de adicionar os pontos de quebra necessários, você poderá definir o design para que os objetos sejam dispostos de modo correto.
No back-end, para cada ponto de quebra, o Adobe Muse adiciona uma declaração de consulta de mídia correspondente à página Web. Consultas de mídia constituem um módulo CSS3 que permite que a renderização do conteúdo se adapte a tamanhos de tela diferentes. A maioria dos navegadores modernos pode interpretar as consultas de mídia correspondentes a esses pontos de quebra. Quando os usuários visualizam sua página Web em vários dispositivos, a consulta de mídia mais apropriada e o layout de design correspondente serão escolhidos pelos navegadores e exibidos aos usuários.
-
Clique em
na barra do ponto de quebra. Observe que um novo ponto de quebra será adicionado na barra do ponto de quebra. Você também pode ver a largura do navegador do ponto de quebra.Da mesma forma, adicione pontos de quebra onde for necessário na barra do ponto de quebra para ajustar larguras do navegador específicas.
Quando você clica em um ponto de quebra, o ponto de quebra ativo é preenchido com cor. Os outros pontos de quebra ficam esmaecidos.
Observação:
Também é possível adicionar pontos de quebra inserindo ativos da Biblioteca com pontos de quebra em sua exibição Design. Abra o painel Biblioteca, selecione o objeto que deseja inserir, clique no símbolo + ao lado do objeto e arraste o objeto para a exibição Design.
Você pode adicionar pontos de quebra a páginas mestre, bem como páginas individuais. Quando você adiciona pontos de quebra a uma página individual, os valores do ponto de quebra só são aplicados a essa página específica.
Quando você adiciona pontos de quebra a uma página-mestre, você pode optar por aplicar qualquer ponto de quebra que precisar às páginas individuais. Os pontos de quebra de páginas-mestre aparecem como pequenos triângulos nas páginas individuais. Você só precisa clicar no sinal de adição (+) para ativar esses pontos de quebra nas páginas individuais.
Considere este cenário. Quando você criar o site, poderá querer adicionar pontos de quebra específicos para telefones. Você pode adicionar pontos de quebra apropriados na página-mestre, de modo que estejam disponíveis nas páginas individuais. Quando você atualizar o design as páginas individuais, poderá colocar esses pontos de quebra nas páginas individuais com um único clique.
Observação:
Quando você aplica uma página-mestre diferente a uma página, os pontos de quebra da página da antiga página-mestre são substituídos pelos pontos de quebra da nova página-mestre.
-
Se você deseja exibir ou editar a cor do ponto de quebra, clique com o botão direito do mouse no ponto de quebra e selecione Propriedades do ponto de quebra ou clique duas vezes no ponto de quebra.
Você também pode modificar a cor do ponto de quebra, a largura da página, a altura e o valor de margem nessa janela.
Modificar a cor e os valores do ponto de quebra usando a caixa de diálogo Propriedades do ponto de quebra.
Observação:
Não é possível editar os pontos de quebra da página-mestre nas páginas individuais.
-
Para excluir um ponto de quebra, execute uma das seguintes etapas:
- Clique no X no lado esquerdo do ponto de quebra ativo.
- Clique com o botão direito do mouse na barra do ponto de quebra e selecione em Excluir ponto de quebra.
Quando você exclui um ponto de quebra, o layout correspondente muda e as configurações de texto do ponto de quebra também são excluídas.
Clique no símbolo x para excluir o ponto de quebra.
Clique com o botão direito e exclua os pontos de quebra.
Observação:
Não é possível excluir o ponto de quebra de uma página-mestre em uma página individual.
No ponto de quebra atual, você pode alternar para os próximos pontos de quebra ou para os anteriores. Para ir até o próximo ponto de quebra ou para o anterior, faça o seguinte:
- Usuários do Windows:
- Ponto de quebra anterior - pressione Ctrl + Shift + 5
- Próximo ponto de quebra - pressione Ctrl + Shift + 6
- Ponto de quebra anterior - pressione Ctrl + Shift + 5
- Usuários do Mac OS:
- Ponto de quebra anterior - pressione Cmnd + Shift + 5
- Próximo ponto de quebra - pressione Cmnd + Shift + 6
- Ponto de quebra anterior - pressione Cmnd + Shift + 5
Você pode usar as seguintes opções para garantir que seu layout tenha uma boa aparência em todos os pontos de quebra:
- Mostrar/ocultar objetos: opcionalmente, é possível ocultar um objeto em um ponto de quebra ao escolher mostrá-lo em outro ponto de quebra. Para mais informações, consulte Mostrar ou ocultar objetos.
- Posicionar objetos de forma diferente em diferentes pontos de quebra: é possível posicionar um único objeto em diferentes posições em diferentes pontos de quebra. Para mais informações, consulte Posicionar objetos no design responsivo para web.
- Usar a opção de fixação responsiva: é possível decidir quais dos objetos devem ser estáticos e quais devem ser fluidos. Você pode fixar os objetos estáticos para que permaneçam na mesma posição em todos os pontos de quebra. Para mais informações, consulte Opção de fixação responsiva.
- Redimensionar objetos: é possível redimensionar um objeto de modo diferente em cada ponto de quebra. Também é possível definir que o tamanho de um objeto seja ajustado automaticamente com base na largura da página. Para obter mais informações sobre como redimensionar objetos, consulte Redimensionar objetos.
- Formatação de texto para diferentes pontos de quebra: é possível formatar o texto de formas diferentes em pontos de quebra diferentes para melhorar sua nitidez e legibilidade em diferentes larguras do navegador. Para mais informações, consulte Formatar texto em layouts responsivos.
Considere a seguinte situação: você inseriu um menu tradicional para desktop. Mas esse menu ocupa muito espaço nas telas de tablets. Um menu encaixado ou um menu sanfonado funcionam melhor para dispositivos tablet.
Lidar com essas situações ao projetar sites responsivos no Adobe Muse é simples. Você pode optar por mostrar um menu tradicional para a exibição no desktop e um menu encaixado para dispositivos tablet, conforme mostrado nas seguintes imagens.
-
Clique com o botão direito do mouse no objeto que deseja ocultar e clique em Ocultar nos pontos de quebra.
O objeto está oculto na exibição do ponto de quebra atual, mas fica visível em outros pontos de quebra. Se desejar ocultar o objeto em todos os outros pontos de quebra em vez disso, clique em Ocultar em outros pontos de quebra. Posteriormente, você poderá exibir o objeto em pontos de quebra específicos usando o painel Camadas.
Ocultar objetos em pontos de quebra
Você pode posicionar objetos de maneira diferente em exibições diferentes do ponto de quebra. Por exemplo, é possível posicionar imagem horizontalmente na área de trabalho quando você pode posicionar as imagens verticalmente na exibição para celular.
O Adobe Muse memoriza a posição de objetos e os exibe adequadamente quando o tamanho da tela muda.
-
Observação:
Enquanto organiza os objetos, lembre-se de verificar a distância entre eles e a distância entre o objeto e a borda do navegador. Talvez seja necessário ajustar as posições do objeto ou adicionar mais pontos de quebra para resolver os problemas de design que ocorrem entre os pontos de quebra.
É possível mover um grupo de objetos ao mesmo tempo no layout responsivo. Se desejar mover um grupo de objetos verticalmente alinhados, basta selecionar o objeto na parte superior. Observe que a alça vertical será exibida na margem esquerda do Adobe Muse.
Ao clicar na alça e movê-la para cima ou para baixo, observe que o objeto selecionado e todos os objetos abaixo dele se movimentarão em grupo.
É possível adicionar um conjunto de pontos de quebra ao inserir um item da biblioteca com pontos de quebra em sua exibição Design. Abra o painel Biblioteca (Windows > Biblioteca). Selecione o item que deseja adicionar à página. Clique no símbolo de adição ao lado do item e arraste o item para a exibição Design.
Observe um conjunto de pontos de quebra que são adicionados automaticamente à sua página. Se você já tiver adicionado pontos de quebra à sua página e você adicionar um item de biblioteca com pontos de quebra, todos os pontos de quebra serão ativados em sua página.
É possível utilizar ativos de biblioteca com pontos de quebra para replicar rapidamente os pontos de quebra entre diferentes páginas e mesmo entre diferentes arquivos .muse.
No Adobe Muse, se quiser tornar determinados objetos estáticos, você pode usar a fixação. Você pode fixar um objeto em uma página ou um navegador:
- Fixe os objetos no navegador: Você pode fixar um objeto ao navegador se quiser que o objeto fique persistente mesmo quando você usar a barra de rolagem do navegador. Por exemplo, uma barra de menus que é persistente, mesmo quando você rolar para cima ou para baixo. Para saber mais sobre como fixar objetos no navegador, consulte este link.
- Fixar os objetos à página: Você pode fixar um objeto em uma página se quiser que o objeto permaneça fixo em relação à página Web. Por exemplo, um logotipo que sempre aparece no canto superior direito da página Web.
Leia para saber como é possível fixar um objeto em uma página no design responsivo.
Observação:
Para determinar se deseja fixar um objeto, use o controle deslizante e exiba a página em várias larguras da janela do navegador. Se você ainda acreditar que desejar fixar um objeto na página, execute as seguintes etapas:
-
Fixe o objeto a uma página de uma das seguintes maneiras:
- Fixar à esquerda
: marque esta caixa se desejar fixar um objeto à esquerda da página Web. A distância entre a borda do navegador e a esquerda do objeto permanece constante. - Fixar no centro
: marque esta caixa se desejar fixar um objeto no centro. A distância entre a borda esquerda e superior do objeto e a borda do navegador permanece constante. - Fixar à direita
: marque esta caixa se desejar fixar um objeto à direita da página Web. A distância entre a borda do navegador e a direita do objeto permanece constante.
Por exemplo, se você tiver um botão como Fazer pedido antecipado agora que precisa aparecer no canto direito da página para todos os pontos de quebra, você deve selecionar o botão e fixá-lo à direita, conforme mostrado na imagem.
Clique na caixa à direita para fixar o objeto à direita.
Quando você fixa um objeto a uma página, o Adobe Muse exibe linhas pontilhadas do objeto para indicar a posição de Fixar na página. Na imagem a seguir, consulte a linha pontilhada que se estende até a borda direita da página. Isso indica que o objeto está fixo no lado direito da página.
Linhas pontilhadas indicam a posição da opção Fixar na página.
- Fixar à esquerda
-
Clique com o botão direito do mouse no objeto e selecione Redimensionar > <Opção de redimensionamento>.
Observação:
A opção de redimensionamento é diferente para objetos diferentes. Por exemplo, você pode redimensionar uma imagem pela largura e altura em um layout responsivo, embora você possa redimensionar uma caixa de texto somente pela largura.
Os objetos que não são fluidos não têm a opção Redimensionar.
-
Arraste e redimensione o objeto para o ponto de quebra atual.
Por exemplo, na primeira imagem, observe que a imagem está saindo para fora da largura em um ponto de quebra de 768 pixels. Você pode arrastar e redimensionar a imagem para ajustar à largura da página, conforme mostrado na segunda imagem.
A imagem está fora da largura da página.
Arraste e redimensione objetos para pontos de quebra diferentes.
Observação:
Se os ativos em um botão de estado ou qualquer outro contêiner de widget forem definidos para serem fluidos, eles serão reposicionados e/ou redimensionados quando o contêiner for redimensionado.
Se deseja copiar o tamanho e a posição de um objeto em pontos de quebra diferentes, execute as seguintes etapas:
-
Siga um dos seguintes procedimentos:
- Selecione Copiar tamanho e posição para > <valor específico do ponto de quebra> para aplicar o tamanho e a posição atuais do objeto ao ponto de quebra específico.
- Selecione Copiar tamanho e posição para > Todos os pontos de quebra para aplicar o tamanho e a posição atuais do objeto a todos os pontos de quebra.
No design responsivo, é importante manipular o texto para várias larguras do navegador para que ele fique claro e legível. O texto colocado em uma exibição de ponto de quebra pode se quebrar repentinamente em outra exibição de ponto de quebra. Quebras de linha indesejadas também podem ocorrer ao alternar os pontos de quebra.
O Adobe Muse permite formatar o texto de maneira diferente para pontos de quebra diferentes. Por exemplo, é possível optar por ter o tamanho da fonte 20 pt para tablets e 15 pt para dispositivos móveis.
Para formatar o texto no design responsivo, o Adobe Muse oferece um ícone de Formatação de texto no painel no qual você também encontra a ferramenta Corte demarcado e Seleção. Há duas opções neste ícone e você pode escolher qualquer uma delas para formatar o texto.
Você pode escolher a opção Formatar texto ao longo dos pontos de quebra para formatar o texto em todos os pontos de quebra de uma página. Ao escolher esta opção, só é necessário formatar o texto em uma exibição de ponto de quebra. O texto é formatado automaticamente nos outros pontos de quebra.
Por outro lado, se precisar formatar o texto em um ponto de quebra específico, você pode escolher a opção Formatar texto no ponto de quebra atual. Por exemplo, você pode optar por aumentar o tamanho do texto para 24 ao organizar o texto para celulares.
A formatação do texto será memorizada e exibida adequadamente quando o site for visualizado em larguras do navegador diferentes.
-
Para formatar o texto, selecione o texto que deseja formatar e clique em uma das seguintes opções:
- Formatar texto ao longo dos pontos de quebra para formatar o texto em todos os pontos de quebra.
- Formatar texto no ponto de quebra atual para formatar o texto apenas no ponto de quebra atual.
Ambas as opções estão disponíveis no painel esquerdo no qual você seleciona a ferramenta Texto ou Corte demarcado.
Formatar texto em design responsivo
A. Formatar texto ao longo dos pontos de quebra B. Formatar texto no ponto de quebra atualObservação:
A opção de formatar texto em layout responsivo muda somente a formatação do texto. Não é possível alterar as palavras ou o conteúdo para cada ponto de quebra.
Se você deseja copiar o tamanho e a posição do texto ao longo de diferentes pontos de quebra ou larguras de navegador, siga estas etapas:
-
Siga um dos seguintes procedimentos:
- Clique com o botão direito do mouse e selecione Copiar formatação do texto para > < valor específico do ponto de quebra> para aplicar os atributos de texto atuais a esse ponto de quebra específico.
- Clique com o botão direito do mouse e selecione Copiar formatação do texto para > Todos os pontos de quebra para aplicar os atributos de texto atuais a todos os outros pontos de quebra.
É possível adicionar efeitos de rolagem em layouts responsivos. Os efeitos de rolagem são suportados apenas com pontos de quebra fixos. Os pontos de quebra fixos indicam que o layout está fixado nessa largura de página. Adicione um ponto de quebra fixo, selecione o objeto ao qual deseja aplicar efeitos de rolagem e defina as configurações de Efeitos de rolagem.
-
Adicionar ponto de quebra com largura fixa
Observe os pontos de quebra fixos com o ícone quadrado
-
Selecione o objeto ao você deseja aplicar os efeitos de rolagem e defina as configurações de Efeitos de rolagem.
Aplicar efeitos de rolagem nos objetos selecionados
Observação:
A aplicação de Efeitos de rolagem é possível somente se você estiver no ponto de quebra fixo, e não nos outros pontos de quebra (fluidos).
Para saber como adicionar e usar efeitos de rolagem no Adobe Muse, consulte Aplicar efeitos de rolagem a imagens de preenchimento do navegador ou de segundo plano.
Quais são os pontos de quebra ideais ao projetar um site para computadores, tablets e celulares?
Se você tiver um dispositivo específico para o qual deseja criar o site, você pode adicionar o ponto de quebra apropriado. No entanto, os usuários podem visualizar seu site em qualquer dispositivo, com qualquer tamanho da tela. Portanto, é recomendável adicionar pontos de quebra somente onde há quebras de design. Isso garante que o site fique bem-disposto em qualquer dispositivo.
Por que os pontos de quebra na página-mestre não funcionam em páginas individuais?
Os pontos de quebra das páginas-mestre são exibidos como triângulos brancos em suas páginas individuais. Para ativar esses pontos de quebra em páginas individuais, clique no triângulo branco na barra de ponto de quebra e clique no sinal de adição (+).
Outra maneira de carregar facilmente pontos de quebra de uma página-mestre a uma página específica é copiar um elemento da página-mestre, alternar para a página em que deseja aplicar os pontos de quebra, selecionar Editar > Colar com pontos de quebra e excluir o item colado da tela. Embora o item seja excluído, os pontos de quebra da página-mestre permanecem.
Como posso impedir que as caixas de texto fiquem sobrepostas em meu layout responsivo?
Como eliminar espaço extra ou espaço em branco em meus sites responsivos?
É possível aparecer espaço extra ou espaço em branco por vários motivos, como rodapé fixo ou objeto oculto. Para obter mais detalhes sobre como resolver esse problema, consulte este artigo.
Como remover a área cinza que aparece quando visualizo meu site?
Sempre que aparecer uma área cinza na visualização, verifique se há um objeto externo ou um objeto oculto inserido fora da página. Para selecionar todos os objetos, clique em Visualizar > Exibir bordas do quadro. Você também pode diminuir o zoom e ver o posicionamento de todos os objetos. Verifique se há um objeto oculto ou objeto externo e insira o objeto em seu layout para resolver este problema.
Como tornar todos os widgets fluidos ou responsivos?
Os widgets no Adobe Muse não são responsivos no momento. Para conhecer o comportamento responsivo de cada widget, consulte esta tabela.
As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.