Como adicionar elementos de fluido a um layout no Dreamweaver

Depois de criar um layout de grade fluido no Dreamweaver, o próximo passo é adicionar tags ou outros elementos para compensar as seções do design. Você tem duas opções quando você criar páginas no Dreamweaver CC: usar tags ou usar tags HTML5.

Ambos funcionam de forma semelhante nestes layouts fluidos, mas usando tags HTML5, como as tags e, tem alguma vantagem, porque as tags adicionar significado e estrutura adicional para a sua página web.

Para adicionar etiquetas, tags HTML5 e outros elementos a uma disposição da grade de fluido, siga estas instruções:

  1. Escolha Inserir-Estrutura-navegação.

    Alternativamente, você pode clicar navegação no painel Estrutura Inserir.

  2. Selecione a caixa de seleção Inserir elemento de fluido na caixa de diálogo Inserir como.

    Quando você usa os recursos de layout de grade de fluidos, você deve selecionar esta opção quando você adicionar tags.

    image0.jpg
  3. Na caixa de diálogo Inserir, selecione se deseja usar o seletor de classe ou ID para criar um novo estilo para a marca que você está inserindo e, em seguida, digite um nome para o novo estilo.

    Mesmo quando você inserir tags HTML5, você deve criar um estilo de classe ou ID correspondente que pode ser usado para formatar o elemento em todas as três layouts.

    nomes de estilo de classe deve começar com um ponto (.) e nomes de estilo ID deve começar com o sinal de libra (#).

  4. Clique em OK.

    O tag é adicionada ao layout, formando uma nova caixa no layout, e o nome do estilo correspondente é adicionado três vezes para o layout CSS.

  5. Selecione a tag inicial que foi incluído no layout e, em seguida, clique no ícone de lata de lixo pequena que aparece na parte inferior direita da tag para excluí-lo.

    Embora você possa manter o tag inicial incluída no layouts de grade de fluidos, ou você pode mudar o nome do estilo aplicado a ele.

  6. Escolha Inserir-Estrutura-artigo.

    A caixa de diálogo Inserir artigo abre (semelhante à caixa de diálogo Inserir Header).

  7. Selecione a caixa de seleção Inserir elemento de fluido na caixa de diálogo Inserir como.

  8. Na caixa de diálogo Inserir, selecione se deseja usar o seletor de classe ou ID para criar um novo estilo para a marca que você está inserindo e digite um nome para o novo estilo.

  9. Clique em OK.

    O tag é adicionada ao layout, formando uma nova caixa no layout, e o nome do estilo correspondente é adicionado três vezes para o layout CSS.

  10. Adicionar os elementos que você deseja para o seu layout, repetindo as etapas 6-9.

    Você pode adicionar elementos de HTML5 para o seu layout de grade de fluido clicando seus ícones correspondentes no painel Estrutura Inserir: uma navegação, um cabeçalho, dois artigos, e um rodapé.

    Note que no código, o Dreamweaver adiciona o prefixo fluido- para o nome de cada estilo que você criar para os seus layouts de grade de fluidos.

    image1.jpg

menu