Como posicionar elementos no dreamweaver para criar três layouts em um grade de fluido

O que faz layouts de grade de fluidos tão poderoso é que você pode alterar a posição e tamanho dos elementos no Dreamweaver de modo que eles são organizados de forma diferente para cada um dos três layouts, criação de projetos que são otimizados para telas móveis, tablets e desktops. Para alterar a largura ou a posição de um elemento, você usa ferramentas visuais do Dreamweaver.

Video: #2 - HTML - Aula 11 - DIVs (Posicionamento e Formatação CSS)

Como editar o layout móvel no Dreamweaver

Dreamweaver configura os estilos de tal forma que eles cascata através de cada um dos três layouts. Isso significa que você deve obter o design móvel do jeito que você quer primeiro. Em seguida, passar para o layout tablet e alterar apenas os elementos que você quer que apareça de forma diferente no tablet. Finalmente, ver o layout desktop. Mais uma vez, alterar apenas os elementos que deseja ser exibido de forma diferente.

Video: Aula - Posicionamento CSS By. Paulo

Para editar o layout móvel, siga estas instruções.

1. Selecione a opção Tamanho móvel na parte inferior do espaço de trabalho.

   As mudanças da área de espaço de trabalho para exibir a página na visualização móvel, formatado com o conjunto correspondente de estilos.

   Nota: As três pequenos ícones na parte inferior direita da área de trabalho fornecem acesso aos previews celular, tablet, e desktop. Quando você mudar de um para o outro, você mudar não só o tamanho da área de exibição, mas também o conjunto correspondente de estilos aplicados à sua página.

   

2. Adicionar texto e imagens para os elementos em seu layout de grade fluido tal como seria de adicionar conteúdo para qualquer outra página no Dreamweaver.

   Você pode copiar e colar texto, bem como aplicar tags HTML e formatação CSS.

3. Selecione um elemento na área de design.

   O estilo CSS correspondente é exibido no painel de seletores, onde você pode editá-lo.

4. Criar, editar e aplicar estilos de texto e imagens como você faria em qualquer outro design da página no Dreamweaver.

   

   Estilos que você deseja aplicar a todos os três layouts deve ser criado quando o layout celular é selecionado porque esses estilos serão aplicadas a todos os três designs menos que seja substituído por um outro estilo criado no comprimido ou de desktop layouts.

Como editar o layout tablet no Dreamweaver

Depois de obter o layout móvel do jeito que você quiser, passar para o layout tamanho tablet e editar os estilos que se aplicam a esse layout.

Para editar o layout tablet, siga estas instruções.

Selecione a opção Tablet Size, no canto inferior direito da área de trabalho.

As mudanças da área de espaço de trabalho para exibir a página na visualização tablet, formatado com o conjunto correspondente de estilos.

Como editar o layout do desktop no Dreamweaver

Depois de obter o móvel e tablet layouts do jeito que você quiser, passar para o layout tamanho do desktop e editar os estilos que se aplicam à maior das três layouts.

Video: Layout de 3 Colunas Fluido e Fixo em Oito Minutos

Para editar o layout do desktop, siga estas instruções.

1. Selecione a opção Tamanho do Desktop no canto inferior direito da área de trabalho.

   As mudanças da área de espaço de trabalho para exibir a página na visualização desktop, formatado com o conjunto correspondente de estilos.

2. Selecione uma seta troca no meio de quaisquer dois elementos para mudar as posições dos dois elementos.

   Os elementos Article1 e Artigo 2.º pode ser trocado por simplesmente clicando na seta troca entre eles.

   

3. Formatar o texto, imagens e outros elementos como desejado para o projeto desktop.

   Todas as outras opções de formatação visual abrangidos no layout tablet, estão disponíveis.

4. Escolha Arquivo → Salvar tudo para salvar todos os arquivos no layout de grade fluido.

   Quando você está editando um layout de grade fluida, você está fazendo alterações no arquivo HTML, bem como a uma folha de estilo externa. Usando a opção Save All garante que você salvou todos os arquivos necessários antes de visualizá-los e publicar seu site para um servidor web.

Como comutação entre layouts em Dreamweaver

É uma boa prática para projetar layouts de grade de fluidos, nesta ordem: primeiro a versão móvel, então a versão tablet, e, finalmente, a versão desktop. Você pode, no entanto, mudar entre esses três layouts como você refinar seus projetos.

Tenha em mente as seguintes algumas regras gerais e as melhores práticas:

• layouts de grade de fluidos são criados usando consultas de mídia que atuam como divisores entre cada um dos conjuntos de estilos que formatam os layouts celular, tablet, e desktop.

• Quando você editar os estilos, é preciso tomar cuidado para que você está editando os estilos que correspondem ao esquema que pretende trabalhar.

• Se você exibir os estilos correspondentes que são criados automaticamente na vista de código, você vai ver que larguras e outros tamanhos são especificados para a quarta casa decimal, por exemplo, largura: 48,2758%. Se você alterar esses números em vista de código, o Dreamweaver irá ajustá-los automaticamente já não para você.

• Ao criar estilos que você deseja aplicar a todos os três layouts, selecione primeiro Qualquer mídia do painel de @media no painel CSS Designer,