O layout de um site precisa responder e adaptar-se às dimensões do dispositivo em que é exibido. Os layouts de grade fluidos oferecem uma maneira visual de criar layouts diferentes que correspondam aos dispositivos em que o site é exibido.

Por exemplo, o site será exibido em computadores, tablets e celulares. É possível usar layouts de grade fluidos para especificar layouts para cada um desses dispositivos. Dependendo de onde o site for exibido (computador, tablet ou celular), o layout correspondente é usado para exibir o site.

Mais informações: Layout adaptativo versus Layout responsivo

O lançamento da Dreamweaver 12.2 Creative Cloud inclui diversas melhorias para layouts de grade fluidos, como o suporte a elementos estruturais HTML5 e a edição facilitada de elementos aninhados. Para obter uma visão geral da lista completa de aprimoramentos, clique aqui.

Observação:

o modo de Inspeção para documentos de Grade fluida não está disponível no Dreamweaver 13.1 e posterior.

Uso de layouts de Grade fluida

Assista a este tutorial em vídeo para aprender a usar os Layouts de grade fluida: Explorando os layouts de grade fluida.

Criação de um layout de Grade fluida

  1. Selecione Arquivo > Novo layout de Grade fluida.

  2. O valor padrão para o número de colunas na grade é exibido no centro do tipo de mídia. Para personalizar o número de colunas para um dispositivo, edite o valor conforme necessário.

  3. Para definir a largura de uma página de acordo com o tamanho da tela, defina o valor em porcentagem.

  4. Além disso, você pode mudar a largura da medianiz. A medianiz é o espaço entre duas colunas.

  5. Especifique as opções da CSS para a página.

    Ao clicar em Criar, você deverá especificar um arquivo da CSS. Você pode executar um dos seguintes procedimentos:

    • Crie um arquivo CSS.
    • Abra um arquivo CSS existente.
    • Especifique o arquivo CSS que está sendo aberto como um arquivo de Grade fluida da CSS.

    A grade fluida para celulares é exibida por padrão. Além disso, será exibido o painel Inserir para a grade fluida. Use as opções no painel Inserir para criar o layout.

    Para alternar para a criação de layout para outros dispositivos, clique no ícone correspondente nas opções abaixo da visualização de design.

  6. Salve o arquivo. Ao salvar o arquivo HTML, você deverá salvar os arquivos dependentes, como boilerplate.css e respond.min.js, em um local no computador. Especifique um local e clique em Copiar.

    O boilerplate.css é baseado no padrão estereotipado HTML5. Ele é um conjunto de estilos da CSS que garante a consistência no modo como sua página da Web é renderizada em vários dispositivos. O respond.min.js é uma biblioteca JavaScript que fornece suporte a consultas de mídia em versões antigas de navegadores. 

     

Inserção de elementos de Grade fluida

O painel Inserir (Janela >Inserir) lista os elementos que você pode usar em um layout de Grade fluida. Ao inserir elementos, você pode optar por inseri-los como elementos fluidos.

  1. No painel Inserir, selecione o elemento a ser inserido.

  2. Na caixa de diálogo exibida, selecione uma classe ou insira um valor para a ID. O menu Classe exibe as classes do arquivo CSS especificado na criação da página.

  3. Marque a caixa de seleção Inserir como um elemento fluido.

  4. Quando você seleciona um elemento inserido, as opções para ocultar, duplicar, bloquear ou excluir o Div são exibidas. Para Divs sobrepostos um em cima do outro, a opção para alternar Divs é exibida.

    OpçãoRótuloDescrição
    AAlternar DivAlterna o elemento selecionado no momento com o elemento acima ou abaixo.
    BOcultarOculta o elemento.

    Para revelar um elemento, siga um destes procedimentos:

    Para revelar seletores de ID, altere a propriedade display no arquivo CSS para block. (display:block)

    Para revelar seletores de classe, remova a classe aplicada (hide_<MediaType>) no código-fonte.
    CMover para cima uma linhaMove o elemento uma linha para cima.
    DDuplicarDuplica o elemento selecionado no momento. A CSS vinculada ao elemento também é duplicada.
    EExcluirPara os seletores de ID, exclui o HTML e a CSS. Para excluir apenas HTML, pressione Excluir.
    Para os seletores de classe, apenas o HTML é excluído.
    FBloquearConverte o elemento para um elemento absolutamente posicionado.
    GAlinharPara os seletores de classe, o botão Alinhar funciona como um botão de margem zero.
    Para os seletores de ID, o botão Alinhar alinha o elemento na grade.

    Observação:

    Os elementos fluidos em uma página podem ser atravessados de modo cíclico usando as teclas de seta para esquerda e direita. Selecione o limite de elemento e pressione a tecla de seta.

Elementos de aninhamento

Para aninhar elementos fluidos em outros elementos fluidos, certifique-se de que o foco esteja no elemento pai. Em seguida, insira o elemento filho obrigatório.

A duplicação aninhada também é possível. A duplicação aninhada duplica o HTML (o elemento selecionado) e gera a CSS fluida relevante. Os elementos absolutos contidos no elemento selecionado são posicionados corretamente. Os elementos aninhados também podem ser duplicados usando o botão Duplicar.

Quando você exclui um elemento pai, a CSS correspondente ao elemento, seus filhos e o HTML associado são excluídos. Os elementos aninhados também podem ser excluídos usando o botão Excluir (atalho de teclado: Ctrl+Delete).

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