Como adicionar elementos de fluido a um layout no Dreamweaver - dummies

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

Ambos funcionam de forma semelhante nestes layouts de fluidos, mas o uso de tags HTML5, como as e tags, tem alguma vantagem, porque as tags adicionam significado e estrutura adicionais à sua página da web.

Para adicionar tags, tags HTML5 e outros elementos para um layout de grade de fluido, siga estas instruções:

1. Escolha Inserir → Estrutura → Navegação.

   Como alternativa, você pode clicar em Navegação no painel Inserir Estrutura.

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

   Quando você usa os recursos de layout de grade de fluido, você deve selecionar essa opção quando você adiciona tags.

   

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

   Mesmo quando você insere tags HTML5, você deve criar uma classe correspondente ou estilo ID que pode ser usado para formatar o elemento em todos os três layouts.

   Os nomes de estilo de classe devem começar com um ponto (.) E os nomes de estilo ID devem começar com o sinal de libra (#).

4. Clique em OK.

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

5. Selecione a tag inicial que foi incluída no layout e, em seguida, clique no ícone da lixeira pequena que aparece na parte inferior direita da etiqueta para excluí-la.

   Embora você possa manter a etiqueta inicial incluída em layouts de grade de fluido, ou você pode renomear o estilo aplicado a ela.

6. Escolha Inserir → Estrutura → Artigo.

   A caixa de diálogo Inserir artigo é aberta (semelhante à caixa de diálogo Inserir cabeçalho).

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

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

9. Clique em OK.

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

10. Adicione tantos elementos quanto desejar para o seu layout, repetindo os passos 6-9.

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

    Observe que no código, o Dreamweaver adiciona o prefixo fluido ao nome de cada estilo que você criou para os layouts da grade de fluido.