Como posicionar elementos no Dreamweaver para criar três Layouts in One Grade Fluid
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 desenhos que são otimizados para telas de celular, tablet e desktop. Para alterar a largura ou a posição de um elemento, você pode usar ferramentas visuais do Dreamweaver.
Menu
Como editar o layout móvel no Dreamweaver
Dreamweaver configura os estilos, de tal maneira que eles em cascata através de cada um dos três planos. Isso significa que você deve obter o design móvel da maneira desejada-lo primeiro. Em seguida, passar para o layout de tablet e alterar apenas os elementos que você deseja que apareça de forma diferente no tablet. Finalmente, visualizar o layout desktop. Mais uma vez, alterar apenas os elementos que você deseja ser exibido de forma diferente.
Para editar o layout móvel, siga estas instruções.
Selecione a opção Tamanho móvel na parte inferior da área 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: Os 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ê muda não só o tamanho da área de exibição, mas também o conjunto correspondente de estilos aplicados à sua página.
Adicionar texto e imagens para os elementos em seu layout de grade de fluido tal como seria de adicionar conteúdo a qualquer outra página no Dreamweaver.
Você pode copiar e colar texto, bem como aplicar tags HTML e formatação CSS.
Selecione um elemento na área de design.
O estilo CSS correspondente é exibido no painel de seletores, onde você pode editá-lo.
Criar, editar e aplicar estilos de texto e imagens como você faria em qualquer outro projeto página no Dreamweaver.
Estilos que você deseja aplicar a todos os três layouts deve ser criado quando o layout móvel é selecionado, pois esses estilos serão aplicadas a todos os três modelos 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 formato 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.
Selecione um elemento que você deseja transformar em uma coluna e use as alças do lado direito para arrastar a coluna para a largura desejada.
Dreamweaver fornece um conjunto de ferramentas de edição visuais que tornam mais fácil para ajustar o tamanho e posicionamento dos elementos da rede de fluidos.
Se você arrastar a alça de qualquer elemento da rede de fluido da esquerda para a direita, você adicionar espaço de margem que obriga o elemento para ficar à direita do layout. Se você arrastar uma alça da direita para a esquerda, você redimensionar o elemento.
Selecione um elemento redimensionado que pretende reposicionar e clique em Mover para cima uma seta Row.
O elemento move-se e alinha-se ao lado do elemento acima dela.
Para mover um elemento para baixo, clique no Inicia New Row seta.
Nota: Clique em cada um dos quatro ícones para esconder um elemento, movê-lo para cima ou para baixo, duplicar ou excluí-lo.
Como editar o layout do desktop no Dreamweaver
Depois de obter o móvel e tablet layouts do jeito que você quer que eles, passar para o layout tamanho do desktop e editar os estilos que se aplicam ao maior dos três layouts.
Para editar o layout do desktop, siga estas instruções.
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.
Seleccionar uma seta Troca no meio de quaisquer dois elementos para mudar as posições dos dois elementos.
Os elementos Article1 e Artigo 2.º podem ser trocados simplesmente clicando na seta para alternar entre eles.
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.
Escolha Arquivo-Salvar tudo para salvar todos os arquivos no layout de grade fluido.
Quando você está editando um layout de grade de líquidos, 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 o seu site para um servidor web.
Como a comutação entre os layouts em Dreamweaver
É uma boa prática para projetar layouts de grade de fluidos, nesta ordem: primeiro a versão móvel, em seguida, 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 no modo 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, primeiro selecione qualquer mídia do painel de @media no painel CSS Designer,
