Como adicionar elementos de fluido para 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 nesses layouts fluidos, mas usando tags HTML5, como o

e marcas, 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 de um layout de grade 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.

   

   Video: Dreamweaver. Desenvolvendo layout para qualquer resolução de tela

3. Na caixa de diálogo Inserir, selecione se você quiser 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 todos os três layouts.

   nomes de estilo 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 incluiu em layouts de grade de fluidos, ou você pode mudar o nome do estilo aplicado a ele.

6. Escolha Inserir → Estrutura → artigo.

   Video: Exportando um site do Fireworks para Dreamweaver

   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.

   Video: Design Responsivo no Dreamweaver CS6 - Fluid Grid Layout

8. Na caixa de diálogo Inserir, selecione se você quiser 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 como muitos 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 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, Dreamweaver adiciona o prefixo fluido- ao nome de cada estilo que você cria para seus layouts de grade de fluidos.

    Video: Transformando Layout Fixo em Fluído - Design Responsivo