Trabalhando com conteúdo sensível

títulos Responsive adaptam-se automaticamente para a exibição tamanhos de dispositivos de seus usuários. recursos embutidos permitem criar títulos que se adaptam automaticamente para diferentes dispositivos e orientações do dispositivo. Estas características de design responsivo eliminar ter de manter vários títulos ou implementar ramificação complexa.

Para habilitar os recursos de resposta e começar com um título responsivo, clique Novo Título Responsive da janela Introdução ou clique em Criar Novo Título do Arquivo guia e selecione Título Responsive . Para habilitar um título existente, clique em Opções Título do Projeto fita e permitir que o Título Responsive Ativar caixa de seleção. Para mais detalhes, consulte Designando um título tão sensível .

Quando o seu título está habilitado para design responsivo, um bar seleção do dispositivo é adicionado à sua área de exibição. A barra de seleção dispositivo contém cinco gráficos que representam os pontos de vista populares com dispositivos de hoje.

Da esquerda para a direita, os pontos de vista do dispositivo são:

Telefone Retrato Ver
Tablet Retrato Ver
Desktop View
Tablet opinião da paisagem
Telefone opinião da paisagem

A barra de visualização permite alternar rapidamente entre visualizações para verificar como o seu texto e objetos são exibidos em cada vista. Quando você adicionar objetos ao título, os objetos são perfeitamente dimensionadas e mudou-se para cada exibição dispositivo. Clique em um gráfico dispositivo dentro da barra de selecção para ver como o seu conteúdo vai olhar para cada dispositivo.

As setas exibidos ao lado dos gráficos dispositivo na barra de seleção do dispositivo representam o fluxo de herança das mudanças de desenvolvimento que você faz na exibição do dispositivo atual. As setas indicam a direcção do fluxo de herança responsivo, a partir da área de trabalho para a pastilha e, em seguida, para o telefone. Além disso, a cor da seta é representativa do dispositivo no qual uma substituição foi feita em vista um determinado dispositivo (verde se a substituição foi feito / herdado a partir da vista de comprimido ou de laranja, se a substituição foi feito no telefone). Por exemplo, as propriedades para os objetos exibidos no telefone Retrato de exibição são herdadas das configurações atuais das propriedades dos objetos no Tablet Retrato View.

A alteração feita na vista de aparelhos não-deskop é considerada uma substituição para a herança responsivo configuração do dispositivo pai. Para ver como substituições em um objeto são indicados na área de trabalho, adicionar um objeto, como um bloco de imagem ou texto, mudar para uma vista do dispositivo, e mover o objeto. Note também que a cor das adorners ao redor do objeto e da cor da etiqueta da propriedade na área de fita também mudam quando você move o objeto. A cor indica que dispositivo no qual uma substituição foi colocado sobre o objecto. Alterar a vista de dispositivo novamente e observe como a substituição é colocado no modo de exibição.

Se você não gosta de como uma substituição é exibido, você pode rapidamente desfazer a substituição e redefinir o objeto para sua configuração original propriedade. Você pode redefinir a substituição na exibição atual ou em todas as vistas. Para repor uma substituição em um objeto, clique em Restaurar no substituições grupo nas propriedades fitas ( Propriedades , estilo , posição e tamanho ) para o objeto ou clique com o botão direito no objeto e selecione Substituições de Repor . Para repor uma substituição para uma unidade atribuível, capítulo, seção ou página, clique com o botão direito e selecione override Repor . Para mais detalhes, consulte Repor as substituições design responsivo .

colocação do objeto fora da página

Para projetos título sensíveis que precisam ter diferentes objetos aparecer em vez de outros sobre os diferentes dispositivos, você pode trocar os objetos dentro e fora da página. Por exemplo, você pode querer Image1 para aparecer no desktop e tablet, mas quer Image2 a aparecer no telefone. Durante modo de execução, apenas os objetos na página será exibida, ou seja, se você arrastar objetos fora de uma página para um dispositivo específico, eles não serão exibidos durante o modo de funcionamento e publicar / preview. Assim, neste cenário, você iria posicionar Image1 na página e colocar Image2 fora da página para vistas de desktop e tablet. Nas vistas de telefone, você iria arrastar Image2 para a página e arrastar Image1 off.

  • Quando você excluir um objeto a partir de um título responsivo, o objeto é excluído do Título Explorer e todos os pontos de vista de dispositivo no título. Você receberá uma mensagem de aviso ao excluir o objeto de pontos de vista não-desktop. Para mais detalhes, consulte Excluindo um objeto em um título responsivo .

  • Você pode usar ações condicionais para colocar as imagens apropriadas (ou off) da página. Para mais detalhes, consulte as condições Especificar .

  • Objetos fora da página não são publicados. Os objetos colocados fora da página em um ponto de vista não são referenciados no conteúdo publicado a menos que haja um Mover para ação associada com o objeto O significado aqui é que os recursos do objeto não serão baixados para o dispositivo de visualização.

movendo-se rapidamente e redimensionar objetos em todos os pontos de vista dispositivos

Você pode mover rapidamente e redimensionar objetos em todos os dispositivos sem mudar a cada exibição. Isso permitirá que você para forçá-mover um objeto para a posição desejada / tamanho, independentemente do seu estado de herança. Ao mover-se ou redimensionamento um ou vários objectos seleccionados, arraste enquanto se pressiona deslocamento e Ctrl . Os objectos em todos os dispositivos são alteradas em conformidade. Para mais informações sobre objetos em movimento usando Ctrl + Shift arrastar e as regras que são aplicadas, consulte Movendo e redimensionando objetos .

Responsavelmente escalar objetos

Por defeito, a maioria dos objectos são dimensionadas para cada vista do dispositivo depois da inserção através de uma fórmula calculada. Isto envolve tomar do objecto rectangular informação e o dispositivo de corrente o utilizador está em Mediante os dispositivos de comutação, o tamanho e a posição de objectos são proporcionalmente dimensionada com base na largura dos dois dispositivos usando as constantes abaixo.:

Device View Largura Altura
Retrato de telefone 480 763
Paisagem telefone 785 450
tablet Retrato 785 1000
Paisagem tablet 1009 662
Área de Trabalho 1009 662

Em não-deskop vista botões, menus e objetos de formulário não são escalados. Além disso, não há escala para quando o visor para o áudio é um controlador ou um ícone de alto-falante e para as tabelas de conteúdo quando o tipo é lista drop-down.

regras de crescimento altura da página

Para objetos que se encaixam dentro da altura da página desktop, a altura da página de outros pontos de vista (em particular Tablet Paisagem e telefone) crescem de modo que os objetos permanecerá na página. (Isso também é válido a partir TabletLandscape para Paisagem telefone.) Isso se aplica a objetos que são completamente na página, bem como parcialmente on / off da página. Se um objeto é completamente fora da página, então a página não vai crescer para os outros dispositivos.

Se a largura de um bloco de texto na visualização do desktop é tal que tem que ser reduzida - e do bloco de texto vertical crescido - em outros pontos de vista, a altura da página nesses outros pontos de vista também irá crescer para acomodar o bloco de texto.

regras Responsive para objetos e texto

Aqui está o que esperar quando a desenvolver com esses elementos em títulos de resposta:

Capítulos, seções, páginas, e UA
  • A largura da página é ajustável em apenas a visualização do desktop (tanto no design fita ea Propriedades fita. Nos outros pontos de vista de resposta, a largura é sempre fixa. A altura da página é herdado apenas no nível do objeto. Em outras palavras, a página herda a partir da secção, o capítulo herda o título, e assim por diante. a altura da página não se herdaram através visualizações (da área de trabalho para reduzir visitas). Você pode mudar a altura da página em todos os pontos de vista sobre o projeto fita ea Propriedades fita .

    O tamanho Inherit página caixa de seleção na Propriedades fita aplica-se apenas a visualização do desktop; e aparece como Inherit Página Altura sobre os pontos de vista não-desktop, porque a largura da página não pode ser alterado.

  • O alinhamento página HTML padrão para títulos de resposta está centrada. Além disso, você não pode ajustar o alinhamento da página HTML em títulos de resposta. Para os títulos existentes, se um título normal (não responsivos) está habilitado a ser sensível, então o alinhamento de página HTML Centrado será aplicada eo controle desativada (e as regras de resposta extra). Se um título responsivo é mudado um título regular, o alinhamento página HTML ainda é centrada e o controle está habilitado para que você pode alterá-lo se desejar.
Texto
  • Para os títulos de resposta, as opções estão disponíveis para você para escalar convenientemente o texto dentro de um bloco de texto. Isso é útil ao ajustar a forma como o texto em um bloco de texto aparece dentro dos pontos de vista diferentes de dispositivo para títulos responsivos. Escalando o texto cria uma substituição da herança responsivo padrão. (Os controles de texto de escala são desativados no modo de exibição de desktop desde que você não pode criar substituições em que view. Além disso, os rótulos em campos vai mudar as cores para refletir os valores de substituição atuais para cada vista do dispositivo).

  • Em casos em que existem vários estilos de texto em um texto bloqueiam os valores base no texto do painel irá mostrar o estilo de texto do primeiro texto no bloco e um indicador - ± - que existem vários valores, por exemplo 12 ±.

  • Botões têm substituições automáticas se eles contêm texto e não escala para o tamanho da fonte. Isso garante que o texto do botão aparece o mesmo tamanho em todos os dispositivos em vez de escalar para baixo a partir do desktop e se tornando menor nos dispositivos mais baixos.

botões Os botões não escala.
imagens
  • As imagens têm dimensionamento normal ao ser inserido em um dispositivo. Se a imagem se encaixa na página, por padrão, ele também é inserido em todos os outros dispositivos como uma substituição para que ele seja o mesmo size.If exata a imagem é maior do que a página do dispositivo atual horizontalmente ou verticalmente, a imagem é colocada em dispositivo de mesa, em seguida, reduzido para os pontos de vista do dispositivo. Se a imagem for maior do que a página do dispositivo atual e maior do que a área de trabalho, a imagem é colocada em exibição desktop e reduzida para os limites da área de trabalho. De lá, ele é escalado mais para baixo para o seu dispositivo atual.

  • As imagens não são ser ampliados.

  • Para imagens usadas em um fundo, a imagem é dimensionada usando as regras de escala. Além disso, se o recurso de imagem de fundo sobre repete desktop ou telhas, então ele vai repetir ou azulejo em vista inferiores. Se ele não repetir ou telha no desktop, em seguida, ele é impedido de repetir ou / telha em vistas inferiores.

Shapes
  • As formas têm dimensionamento normal ao ser inserido em um dispositivo. Se a forma encaixa na página por padrão, ele também é inserida em cada outro dispositivo, tal como uma substituição de modo que é o mesmo size.If exacta a forma é maior do que a página do dispositivo actual, quer na horizontal ou na vertical, a forma é colocado em dispositivo de mesa, em seguida, reduzido para os pontos de vista do dispositivo. Se a imagem for maior do que a página do dispositivo atual e maior do que a área de trabalho, a imagem é colocada em exibição desktop e reduzida para os limites da área de trabalho. De lá, ele é escalado mais para baixo para o seu dispositivo atual.

  • Shapes são escalados-up para o desktop, se ele é desenhado em outro lugar, em seguida, siga a herança responsivo a fluir o tamanho de volta para vistas mais baixos. Isso mantém o tamanho original na vista onde desenhada sem a criação de uma substituição.

  • Para formas usadas em um fundo, a forma é dimensionada usando as regras de escala. Além disso, se a forma de fundo sobre repete desktop ou telhas, então ele vai repetir ou azulejo em vista inferiores. Se ele não repetir ou telha no desktop, em seguida, ele é impedido de repetir ou / telha em vistas inferiores.

Poses de caracteres poses de personagens são imagens e, portanto, usar as mesmas regras de dimensionamento responsivos.
animações
  • O tamanho é dimensionado independentemente da da vista e, em seguida, dimensionados em resposta.

  • O jogo continua quando um dispositivo é girado.

  • O recurso é ser substituível em outros pontos de vista do dispositivo.

auditivo
  • objetos de áudio precisam de regras separadas para dimensionamento e tamanho substituições devido aos controladores. O ícone do controlador ou alto-falante de áudio padrão não escala e não têm um tamanho capaz de substituição. Se estiver usando uma imagem como o controlador, o objeto de áudio é escalado como outros objetos de imagem e permite substituições de tamanho.

  • O jogo continua quando um dispositivo é girado.

  • O recurso é ser substituível em outros pontos de vista do dispositivo.
Vídeo
  • O tamanho do vídeo é dimensionada independentemente da da vista e, em seguida, escalado responsavelmente.

  • A reprodução de vídeo continua quando um dispositivo é girado.

  • O controlador de vídeo não é substituível. O controlador ou imagem actualmente seleccionada é aplicada em todos os dispositivos e pontos de vista.

  • O recurso de vídeo é ser substituível em outros pontos de vista do dispositivo.

Vídeos do YouTube
  • A reprodução de vídeo continua quando um dispositivo é girado.

  • O controlador de vídeo não é substituível. O controlador ou imagem actualmente seleccionada é aplicada em todos os dispositivos e pontos de vista.

  • O recurso de vídeo é ser substituível em outros pontos de vista do dispositivo.

Dúvidas, Testes e pesquisas
  • Em títulos de resposta, as perguntas são inseridos com substituições automáticas sobre o tamanho da questão ea posição em todos os dispositivos.

  • alterações de propriedade de perguntas, testes e pesquisas serão propagadas para todos os pontos de vista. Apenas mudanças de posição e tamanho original será permitido para objetos de elemento questão (tais como recursos de texto e imagem).

  • A largura padrão de blocos de texto são aumentadas dentro das perguntas para que, quando reduzidas eles vão ajudar a prevenir o texto de amassando ou embalagem.

  • Um adicional de 10 px é colocado entre os botões de rádio / caixas de seleção e seu texto do rótulo.

  • Arrastar e soltar e questões de ponto de acesso deve incluir uma imagem com a questão. Para esta imagem da lista drop-down recurso de imagem na fita Propriedades da imagem está desativada. A imagem só pode ser alterado usando o Criador Pergunta. Tal como acontece com outras mudanças pergunta, esta alteração é aplicada para a questão em todos os pontos de vista.

  • Por questões de ponto de acesso, as manchas são ajustados automaticamente nas vistas do dispositivo.

menus O objeto de menu é tratado como outros objetos baseados em texto. O tamanho não é dimensionada em vista não-desktop. Você pode dimensionar texto em vista não-desktop (no Propriedades fita e Início fita). Você pode aumentar o texto (Texto Aumento / Diminuição) em todas as vistas (em Propriedades de fita e Início fita).
Tabelas de conteúdos Tabela de objetos conteúdos são tratados como outros objetos baseados em texto. O tamanho do objeto não é alterado automaticamente. Dimensionamento texto está disponível em vistas não-desktop (no Propriedades fita e Início fita). Você pode aumentar o texto (Texto Aumento / Diminuição) em todas as vistas (em Propriedades de fita e Início fita).
As barras de progresso
  • Para barras de progresso que contenham imagens, são aplicadas as mesmas regras-dimensionamento da imagem.

  • Atualmente, apenas a orientação da barra de progresso é substituível.

objetos de formulário
  • O tamanho dos objetos de formulário não são automaticamente dimensionados com base inheritance..You será necessário para torná-los um tamanho diferente, se desejar. Isso inclui o rótulo de texto associado para caixas de seleção e botões de rádio.

  • Dimensionamento texto está disponível em vistas não-desktop (no Propriedades fita e Início fita). Você pode aumentar o texto (Texto Aumento / Diminuição) em todas as vistas (em Propriedades de fita e Início fita).

  • Escalando o texto para cima ou para baixo não vai mudar automaticamente o tamanho do objeto de formulário. Você precisará alterar o tamanho para ser adequado ao tamanho do texto, se desejado.

  • Propriedades forma de objeto não irá ser substituível.

Extensões HTML , RSS Feeds e Web do Windows O recipiente para estes objectos são dimensionadas em posição e dimensões semelhantes às imagens.
objetos de texto inteligente Estes incluem data / hora, título da página, número de página, e pão ralado. Eles são tratadas da mesma forma um bloco de texto para determinar o tamanho ea posição responsivo. Você pode aumentar o texto (Texto Aumento / Diminuição) em todas as vistas (em Propriedades de fita e Início fita). Você pode aumentar o texto (Texto Aumento / Diminuição) em todas as vistas (em Propriedades de fita e Início fita).
charts Os gráficos são imagens e, portanto, usar as mesmas regras de dimensionamento responsivos.
equações Equações são imagens e, portanto, usar as mesmas regras de dimensionamento responsivos.
Ações e Triggers
  • Acções e triggers não são ser substituível.

  • Você pode usar várias ações e ações condicionais para alterar o comportamento entre as vistas. Utilizar a rotação do dispositivo de gatilho para definir ações para ocorrer quando um tablet ou orientação do telefone é girado.

  • Gatilhos nível da página (Na Mostra , On PageShow ) não são refired quando um dispositivo é girado. Isso evita que objetos de esconder ou mostrar inadequadamente ou - mais importante - Modificar variáveis acções de ser dobrado-up. Se você quer uma ação para ocorrer nesse cenário, utilize a rotação do dispositivo de gatilho para realizá-lo.

  • As ações podem ser condicionada para permitir que você invocar comportamentos diferentes em visões alternativas do dispositivo. Use a variável reservados CurrentView para comparação. Os valores armazenados são:

    • Área de Trabalho

    • TabletLandscape

    • TabletPortrait

    • PhoneLandscape

    • PhonePortrait

    Por exemplo, você pode comparar que CurrentView “é igual a” TabletLandscape ou “Contém” Phone ou “não contém” Desktop. (Você também pode atalho, por exemplo, “Contém” “T” uma vez que apenas as escolhas Tablet conter um capital T, ou “Contém” “L” uma vez que apenas as escolhas Paisagem conter um capital L.)

  • Se a alterar o conteúdo ação é executada na página após a carga inicial (por exemplo, usando um clique de botão), então a condição / aparência resultante é exibido mesmo quando o dispositivo é girado. Por exemplo, se alterar o conteúdo Um para novo valor B é executado no dispositivo na paisagem, quando o dispositivo é girado para retrato da nova imagem B ainda será mostrado.

Layouts de página

Você pode adicionar e gerenciar layouts de páginas na Propriedades fita para a página.

layouts de página são remapeado para cada vista do dispositivo para o espaçamento ideal, enquanto ainda tendo em conta a maioria dos temas. (Alguns temas têm invulgarmente beira larga, cabeçalho ou rodapé gráficos. Nesses casos, o layout pode sobrepor-se ligeiramente.)

Se você criar uma página com um layout e, em seguida, decidir mudar o layout da página. contanto que não existem objectos ainda adicionados (isto é, contém recipientes esquema vazio), a disposição existente é removido e substituído com o novo esquema. Observe que, se existem objetos, eles não são aplicadas para o novo layout. O layout recém-selecionado é aplicado à página.

Transitions Transições não são substituível.

Para mais informações, visite estas observações relacionadas com o RCD em nossa Comunidade Trivantis:

Suporte | Sobre Trivantis
© de Copyright Trivantis 2017