Arraste o controle deslizante na barra do ponto de quebra e coloque-a no ponto onde deseja adicionar o ponto de quebra.
Última atualização em
May 04, 2021 11:20:23 PM GMT
|
Também se aplica a Adobe Muse CC (2015)
Leia este artigo para saber mais sobre pontos de quebra. Aprenda como proteger e redimensionar objetos para o layout responsivo e para formatar o texto nos pontos de quebra.
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.
O que são pontos de quebra?
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.
Adicionar pontos de quebra
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.
Onde devo adicionar os pontos de quebra?
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.
Editar pontos de quebra
-
Na barra do ponto de quebra, arraste e solte o controle deslizante no valor desejado do ponto de quebra. Este é seu local alterado do ponto de quebra.
-
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. -
Clique em OK para salvar as alterações.
Observação:
Não é possível editar os pontos de quebra da página-mestre nas páginas individuais.
Excluir pontos de quebra
-
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.
Alternar entre pontos de quebra
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
Trabalhar com objetos em um layout responsivo
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.
Mostrar ou ocultar objetos
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.
Para mostrar ou ocultar objetos no seu projeto do Adobe Muse:
-
Insira todos os objetos de que você necessita, inclusive os que deseja ocultar em alguns pontos de quebra.
-
Arraste o controle deslizante para ir até uma exibição específica do ponto de quebra.
-
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 Agora, organize os objetos que estão visíveis na exibição do ponto de quebra.
-
Vá para a exibição do ponto de quebra em que deseja mostrar o objeto que ocultou anteriormente. Você pode arrastar o controle deslizante para fazer isso.
-
Clique no painel Camadas e localize a camada do objeto que deseja mostrar. Talvez seja necessário detalhar diferentes camadas para encontrar a camada do objeto.
Use o painel Camadas para mostrar/ocultar objetos -
Clique na primeira coluna correspondente à camada do objeto. Um pequeno ponto preto aparecerá para indicar que agora o objeto está visível na exibição atual do ponto de quebra.
Clique na primeira coluna para mostrar ou ocultar os objetos. Para mostrar o objeto em todos os pontos de quebra, clique com o botão direito do mouse no objeto e clique em Exibir em outros pontos de quebra.
Posicionar objetos
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.
Para mover os objetos entre os pontos de quebra, faça o seguinte:
-
Selecione o ponto de quebra em que deseja posicionar o objeto.
-
Arraste e solte o objeto no local desejado.
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.
Movimentação de vários objetos como grupo
É 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.
Colocar objetos com pontos de quebra
É 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.
Fixar objetos
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:
-
Selecione os objetos que deseja fixar.
-
Na opção Fixar na parte superior, selecione uma das caixas de para fixar do objeto à página.
Use o menu Fixar para fixar objetos em um layout responsivo. -
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
-
Use o controle deslizante para exibir o layout em diferentes larguras de página. Verifique se a fixação afeta o layout da página à medida que a página é redimensionada.
Redimensionar objetos
-
Vá para a exibição do ponto de quebra em que deseja redimensionar o objeto.
-
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. -
Visualize esta alteração em um navegador. Redimensione seu navegador até que a largura do navegador atinja o valor do seu ponto de quebra. Observe a alteração do tamanho do objeto após a largura do navegador atingir o valor do ponto de quebra.
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.
Copiar o tamanho e a posição de objetos
Se deseja copiar o tamanho e a posição de um objeto em pontos de quebra diferentes, execute as seguintes etapas:
-
Clique com o botão direito do mouse no objeto que deseja copiar.
-
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.
Formatar textos em layout responsivo
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.
Formatar texto em layout responsivo
-
Vá até a exibição do ponto de quebra necessária.
-
Selecione a caixa de texto e arraste-a para redimensioná-la. O texto irá se realinhar conforme você redimensiona a caixa de texto.
Observação:O limite direito da caixa de texto define a extensão na qual o texto fluirá na largura, à medida que você redimensiona a caixa de texto.
-
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 atual
Observaçã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.
Copiar formatação de texto pelos pontos 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:
-
Selecione o texto que deseja copiar.
-
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.
Visualize seu layout em cada ponto de quebra usando o controle deslizante. Adicione pontos de quebra, se necessário, para otimizar seu layout para diferentes larguras do navegador.
Aplicação de efeitos de rolagem em layouts responsivos
É 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.
-
Abra a página do Adobe Muse na qual deseja adicionar o efeito de rolagem. Por exemplo, é possível adicionar efeitos de rolagem à navegação e à imagem do fundo do cabeçalho.
-
Ao abrir o layout responsivo, observe os pontos de quebra na página. Esses pontos de quebra são fluidos, conforme indicado pelo ícone com setas nos dois sentidos.
Pontos de quebra fluidos indicados por um ícone de seta dupla Se o painel Efeitos de rolagem estiver agora visível, observe que a opção foi desabilitada.
Efeitos de rolagem foram desabilitados nos pontos de quebra fluidos -
É necessário adicionar um ponto de quebra fixo para ativar os efeitos de rolagem. Para adicionar pontos de quebra fixos, clique na barra Ponto de quebra e, em seguida, em Adicionar ponto de quebra.
-
Escolha a Largura fixa no menu suspenso e clique em OK.
Adicionar ponto de quebra com largura fixa 
Observe os pontos de quebra fixos com o ícone quadrado Observe o ponto de quebra fixo na página indicado por um quadrado. Ao visualizar a página em navegadores com largura de 1225 pixels ou mais, a página permanece fixa, conforme vista em 1225 pixels. O layout não se torna fluido nesse ponto de quebra.
-
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.
Perguntas frequentes
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.
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.
As caixas de texto não são dimensionadas e podem se sobrepor umas às outras se não forem "fluidas". Para torná-las fluidas, clique com o botão direito em cada caixa de texto e selecione Redimensionar > Largura responsiva.
É 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.
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.
Os widgets no Adobe Muse não são responsivos no momento. Para conhecer o comportamento responsivo de cada widget, consulte esta tabela.
Fazer logon em sua conta