Layouts de Grade fluida (CC)

Pesquisar

Última atualização em 13 de fev de 2023

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

Selecione Arquivo > Novo layout de Grade fluida.
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.
Para definir a largura de uma página de acordo com o tamanho da tela, defina o valor em porcentagem.
Além disso, você pode mudar a largura da medianiz. A medianiz é o espaço entre duas colunas.
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.
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.

No painel Inserir, selecione o elemento a ser inserido.
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.
Marque a caixa de seleção Inserir como um elemento fluido.

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ção	Rótulo	Descrição
A	Alternar Div	Alterna o elemento selecionado no momento com o elemento acima ou abaixo.
B	Ocultar	Oculta 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.
C	Mover para cima uma linha	Move o elemento uma linha para cima.
D	Duplicar	Duplica o elemento selecionado no momento. A CSS vinculada ao elemento também é duplicada.
E	Excluir	Para 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.
F	Bloquear	Converte o elemento para um elemento absolutamente posicionado.
G	Alinhar	Para 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).