Como criar um One-coluna de fluido a disposição da grade no Dreamweaver

Antes de mergulhar na criação de um projeto da grade fluido complicada no Dreamweaver, tentando considerar uma mais simples. Comece por criar um one-coluna layout simples, grade fluídica, seguindo estas instruções simples:

  1. Escolha Arquivo-Novo.

    A janela Novo documento é aberta. Nota: Certifique-se de ter concluído o processo de instalação do site antes de começar a trabalhar em um novo layout de grade fluido.

  2. Do lado esquerdo da tela, selecione Grade Fluid Layout.

    As opções de nova janela de documento mudar as opções de grade de fluidos.

    image0.jpg
  3. Especificar o número de colunas que você quer em cada um dos três layouts.

    Para adicionar ou remover colunas, selecione o campo de texto sobre cada coluna, por sua vez e digite o número de colunas que deseja.

  4. Especificar a porcentagem da janela do navegador que você quer cada layout para cobrir.

    Selecione o campo de texto abaixo cada layout, por sua vez e digite um número que representa a porcentagem de espaço pretender que o esquema para cobrir quando o desenho é visto em uma janela do navegador. Por exemplo, por padrão, o layout do desktop está definido para assumir 90 por cento do espaço disponível, mas você pode alterá-lo para 95 por cento, para dar mais espaço de design e reduzir o espaço de margem.

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

    Por padrão, o Dreamweaver define cada uma das margens para ocupar 25 por cento do espaço disponível.

  6. Use a lista drop-down para especificar um tipo de documento.

    Por padrão, layouts de grade de fluidos são criados usando o doctype HTML5. A menos que você precisa mudar o tipo de documento a ser mais compatível com outros tipos de formatação usado em seu website, HMTL5 é a opção recomendada para projetos de Web responsivos.

  7. Clique em Criar.

    A caixa de diálogo Salvar como se abre pronto para salvar um arquivo CSS.

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

    Um novo arquivo HTML abre na área de trabalho do Dreamweaver, mas ainda não está salvo. O arquivo CSS você nomeou é salva e seu nome se torna 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-Save

    A caixa de diálogo Salvar como é exibida.

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

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

  11. Clique em OK para copiar os arquivos boilerplate.css e respond.min.js para a pasta site.

    Todos os três arquivos são adicionados ao painel Arquivos e você retornar ao seu arquivo HTML recém-nomeado aberto na área de trabalho do Dreamweaver.

    image1.jpg
  12. Dê a página um título inserindo o texto no campo Título no topo da área de trabalho.

E que conclui o processo de criação de um novo conjunto de arquivos para o seu layout de grade fluido.

menu