Como criar uma disposição de grade de fluido de uma coluna no Dreamweaver - manequins

Antes de mergulhar na criação de um design de grade de fluido complicado no Dreamweaver, considere tentar um mais simples. Comece criando um layout de grade de fluido simples e de uma coluna, seguindo estas instruções fáceis:

1. Escolha Arquivo → Novo.

   A nova janela do documento é aberta. Nota: Certifique-se de que concluiu o processo de configuração do site antes de começar a trabalhar em um novo layout de grade de fluido.

2. A partir do lado esquerdo da tela, selecione Layout de grade de fluido.

   As opções da janela Novo documento mudam para as opções da rede de fluídos.

   

3. Especifique o número de colunas que deseja em cada um dos três layouts.

   Para adicionar ou remover colunas, selecione o campo de texto em cada coluna e digite o número de colunas desejadas.

4. Especifique a porcentagem da janela do navegador que deseja que cada layout cubra.

   Selecione o campo de texto abaixo de cada layout por sua vez e digite um número que represente a porcentagem de espaço que deseja que o layout cubra quando o design for exibido em uma janela do navegador. Por exemplo, por padrão, o layout da área de trabalho está configurado para ocupar 90% do espaço disponível, mas você pode alterá-lo para 95% para se dar mais espaço de design e reduzir o espaço de margem.

5. Altere a porcentagem da largura da coluna para alterar a quantidade de espaço de margem entre cada coluna.

   Por padrão, o Dreamweaver define cada margem para ocupar 25% do espaço disponível.

6. Use a lista suspensa para especificar um tipo de documento.

   Por padrão, os layouts de grade de fluido são criados usando o tipo de documento HTML5. A menos que você precise alterar o doctype para ser mais compatível com outras formatações usadas em seu site, o HMTL5 é a opção recomendada para projetos web compatíveis.

7. Clique em Criar.

   O diálogo Salvar como se abre pronto para salvar um arquivo CSS.

8. Digite um nome para o seu arquivo CSS e clique em Salvar.

   Um novo arquivo HTML é aberto no espaço de trabalho do Dreamweaver, mas ainda não foi salvo. O arquivo CSS que você nomeou é salvo e seu nome fica visível no painel Arquivos.

   Nota: Ao contrário do processo de criação de outros tipos de páginas no Dreamweaver, o arquivo CSS é salvo primeiro e o arquivo HTML é salvo em uma etapa posterior.

9. Escolha Arquivo → Salvar

   A caixa de diálogo Salvar como é aberta.

10. Digite um nome para seu arquivo HTML e clique em OK.

    A caixa de diálogo Salvar como fecha e um aviso aparece no Dreamweaver informando que seu layout de grade de fluido requer dois arquivos adicionais: boilerplate. css e responda. min. js.

11. Clique em OK para copiar o boilerplate.css e responda. min. js arquivos na pasta do seu site.

    Todos os três arquivos são adicionados ao painel Arquivos e você retorna ao arquivo HTML recentemente nomeado aberto no espaço de trabalho do Dreamweaver.

    

12. Dê um título à página inserindo texto no campo Título na parte superior do espaço de trabalho.

E isso completa o processo de criação de um novo conjunto de arquivos para o layout da grade de fluido.